移动端适配的方法-优快云博客

本文链接：https://blog.youkuaiyun.com/shadowfall/article/details/113979709

本文介绍了如何在HTML模板中通过JavaScript动态调整字体大小以实现响应式设计。通过监听窗口的resize和pageshow事件，结合计算页面宽度与设定基准值的比例，动态设置html元素的字体大小。同时，也展示了使用媒体查询(@media)针对不同屏幕尺寸设定不同的字体缩放比例，以确保在多种设备上提供良好的阅读体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在模板中通过js操作进行适配

在生成页面时，会通过模板来生成，所以当我们在模板的head中进行js操作后，每次生成的页面都会进行字体的适配转换。


<html lang="en" style="font-size: 100px;">  //  这个地方我们需要设置一个相对的数值 以便在接下来设置
<script>
      (function(w){
        
        var doc = w.document;
        var docEl = doc.documentElement;
        var timer;
        function refersh() {
          var width = docEl.getBoundingClientRect().width;   //拿到页面的尺寸
          if(width>750){
            width = 750;
          }
          var rem = width/7.5;    //转换为rem  这里是按照设计稿750来计算

          docEl.style.fontSize=rem+"px";
        }
       
        w.addEventListener("resize",function(){  //如果页面发生改变
          timer && clearTimeout(timer);			//这里面做个函数的节流 防止过多的操作
          timer = setTimeout(refersh,400);
        })

        w.addEventListener("pageshow",function(){  //如果显示隐藏
          timer && clearTimeout(timer);
          timer = setTimeout(refersh,400);
        })
      })(window)
    </script>

使用插件适配的方法

使用媒体查询适配的方法

@media screen and (min-width:350px){
    html{font-size:342%;}
}
@media screen and (min-width:360px){
    html{font-size:351.56%;}
}
@media screen and (min-width:375px){
    html{font-size:366.2%;}
}
@media screen and (min-width:384px){
    html{font-size:375%;}
}
@media screen and (min-width:390px){
    html{font-size:380.85%;}
}
@media screen and (min-width:393px){    /* 小米NOTE */
    html{font-size:383.79%;}
}
@media screen and (min-width:410px){
    html{font-size:400%;}
}
@media screen and (min-width:432px){ /* 魅族3 */
    html{font-size:421.875%;}
}
@media screen and (min-width:480px){
    html{font-size:469%;}
}
@media screen and (min-width:540px){
    html{font-size:527.34%;}
}
@media screen and (min-width:640px){
    html{font-size: 625%;}
}

@media screen and (width:720px){
    html{font-size: 703.125%;}
}