如何做到 rem适配几乎的移动端设备

https://www.cnblogs.com/annie211/p/8118857.html

这是原文。感谢大佬的分享指导。

同程APP的做法：

---

同程APP 会根据你的屏幕大小的变化，根元素（html）的字体大小也会变化。

首先设置页面 meta 

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

---

一张 750px的设计稿。采用 1rem = 100px 便于换算。 这样在html设置根元素的字体大小就是 ： font-size：100px

750 / 100 = 7.5rem 。这是一个比值

俗气点就是 750个苹果，采用 1斤等于100个苹果，得到7.5斤。

rem单位是： 基于根元素的字体大小而设置元素的具体数值，如下红圈所示。

假设我们在iphone6打开，得到的屏幕宽是 375px 。

---

375 / 7.5 = 50px  这样在html设置根元素的字体大小就是 ： font-size：50px。 上图只是演示，不同的比值font-size大小不同。

俗气点就是 750个苹果，采用 1斤等于100个苹果，得到7.5斤。 根据这个标准！你有375个苹果，你想得到7.5斤，就必须知道一斤有几个苹果。 所以算出来是 50个！ 在你设置大小时，比如 width:0.5rem 就等于 0.5 * 50 = 25px。

有人觉得乱

总结一下： 用化学的例子吧。  两个东西进行化学反应，需 达到 1：7.5的比例。

750px ：？  = 1：7.5  =》  ？ = 100      那么你原来的是750px设计稿。在375px上实现，

375px :  ?    = 1：7.5  =》  ？ = 50   就是 50px  font-size = 50px

---

另一个总结： 750px的屏幕， 按1rem=100px ，便于换算。得到 屏幕大小 7.5rem，也是比值等于 7.5。

 动态设置html的font-size：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

document.documentElement.style.fontSize  = 750 / 7.5 = 100px。 此时 1rem = 100px

当750px的被显示在 宽375px的设备上时， document.documentElement.clientWidth  等于 375px。

document.documentElement.style.fontSize  = 375 / 7.5 = 50px。 此时 1rem = 50px

对应比： 750 ：100px = 375 ： 50px  这两个相等，在不同的 大小px屏幕上打开，呈现的效果会是一样的，达到解决rem适配问题。