JS移动端适配问题的解决方案

NumbSilver

于 2021-03-24 11:02:56 发布

阅读量306

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.csdn.net/NumbSilver/article/details/115165000

前端专栏收录该内容

30 篇文章

订阅专栏

本文探讨了两种解决移动端适配问题的方法。一种是定值方案，通过设定基准字体大小并根据屏幕宽度动态调整。另一种是定比例方案，利用CSS单位和窗口缩放事件实现自适应布局。这两种方法旨在确保在不同设备上提供一致的视觉体验。

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

JS移动端适配问题的解决方案：

定值解决：

前提条件：稿件宽度 375px

设置 font-size：100px（可以自定义）
所有CSS内单位写为rem

  document.documentElement.style.fontSize = document.documentElement.clientWidth *100/375 +'px';
  window.onresize = function (){
      document.documentElement.style.fontSize = document.documentElement.clientWidth *100/375 +'px';
  }

定比例解决：

@font-size: 375./10rem;
所有CSS设置为： XXX./@font-size

      //设置定比例的 font-size
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

    window.onresize = function () {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
    }