移动页面 REM自适应

最新推荐文章于 2024-05-09 18:55:31 发布

weixin_33874713

最新推荐文章于 2024-05-09 18:55:31 发布

阅读量70

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zzzzzzzsy/p/8343337.html

本文介绍了一种使用JavaScript实现的响应式网页布局方案。该方案通过动态调整根元素字体大小来确保页面元素在不同屏幕尺寸下都能保持良好的显示效果。具体实现方式为监听窗口大小变化并据此调整根元素的字体大小。

 ~function(){
         let computed = function(){
         let desW = 640;
         let devW = document.documentElement.clientWidth;
         if(devW>=640){
            document.documentElement.style.fontSize = '100px';
            return;
         }
         document.documentElement.style.fontSize = devW / desW * 100 + 'px';
         }
         computed();
         window.addEventListener('resize',computed,false);
     }();