移动端适配方案（rem+flex）

为什么用rem不用px?

　　主流：各大网站的移动版绝大多数都是用的rem。

　  移动端屏幕分辨率差别太大：最低适配的iPhone6，分辨率仅为750*1334。而现在市面上大多数手机，都达到了1080*1920或1080*2340（全面屏）。

所有元素都要用rem吗？

　　不是。这就跟响应式布局的原则是一样的。不需要所有设备的样式比例严格完全相同，而是优先保证内容能正常显示。移动端开发的通用原则是：文字流式，控件弹性，图片等比缩放。

为何要引入flex?

　　为了弹性控件，比如有些控件的宽高是写死的，但是间距不定，就是为了保证控件是弹性的。举个例子：

　　（京东移动版在iPhone8p和ipad上的视觉比例不太一样，如果按同一个比例原封不动地移植到ipad上，很多图标和元素会显得非常巨大）

如何设置html初始的font-size?

　　没有固定答案，但它的设置又很影响开发的效率。为了避免rem和px的大量换算，我提供一个自己的做法：根font-size完全取决于设计稿的尺寸。

　  根据设计稿的尺寸，把根font-size处理成100px。在开发的过程中，比如碰到一个120px*40px的元素，那就可以写成1.2rem*0.4rem，十分方便。

　  比如设计稿是750*1334px，也就是以iPhone6为基础的。那要处理成100px的根font-size，就需要屏幕宽度/7.5即可。如果设计稿是1080*1920的，那就用屏幕宽度除以10.8。

设置的具体代码？

　　比如我现在的设计稿是750*1334px的，我在项目的index.html中加入这样一段js代码：

    <script>
      let deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
      let htmlDom = document.querySelector(‘html‘);
      htmlDom.style.fontSize = deviceWidth / 7.5 + ‘px‘;
    </script>

　　测试效果如下：

　　看了好几家大型网站的移动版网站，虽然看不到源码，但是我猜测腾讯视频移动版网站跟我的想法应该是一样的，而且设计稿应该就是750*1334px。传送门：https://3g.v.qq.com/

移动端适配方案（rem+flex）

原文：https://www.cnblogs.com/zhangnan35/p/11108318.html