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适配问题。
$\color{#228B22}{前端学习小总结，不对之处，欢迎大神们喷我。可以的话顺手点个赞吧~~！}$
$\color{red}{警: 禁止抄袭，转载说明出处 🤨}$
