1.rem定义？
首先css3规定1rem = html根节点的font-size，rem也就是root em简写。
为了方便计算pc端适配通常设置根节点font-size = 100px 那么 1rem = 100px
2.动态计算rem原理？
核心思想：百分比布局可实现响应式布局，而rem相当于百分比布局。
实现手段：动态获取当前视口宽度width，除以一个固定的数n，得到rem的值。表达式为rem = width / n * (window.devicePixelRatio||1)。 这里考虑设备像素比。通过此方法，rem大小始终为width的n等分。
无论设备可视窗口如何变化，始终设置rem为width的1/n.即实现了百分比布局。
3.为什么要动态计算rem？
因为ui设计稿是指定的某个分辨率，要想在其他分辨率下使用同样的尺寸就需要等比缩放，因此需要js动态计算rem。
width / n 是将屏幕分为了ui设计稿的n等分，当设备宽度不是ui设计稿的宽度时，页面等分不变，表现为页面百分比缩放。
4.若固定写死html.fontSize = 100px而不是动态计算会有什么问题？
举个例子：在1920 * 768分辨率下的ui设计稿有个200 * 200 px的盒子，那么css文件中该盒子样式为 2 * 2 rem 。在屏幕1680宽度下：
方式一：动态计算rem
html.fontSize = 当前宽度/1920 * 100 为了方便计算，这里乘以100
该盒子在页面中实际表现宽高为：2rem * 1680/1920 px = 175 px，也就是 175 * 175 px
方式二： 写死 html.fontSize = 100px
该盒子在页面中实际表现宽高为： 2rem * 100px= 200 px， 也就是 200* 200 px
最后用屏幕比例计算正确的200px在1680宽度下应该是多少：x/1680 = 200/1920 => x = 175。
由此说明动态计算rem是正确的，不然不能同比缩放。
其实上面的x/1680 = 200/1920 也就是x = 2 * 1680/1920 * 100 = 2 * html.fontSize其实就是rem换算为px的过程。
5.设备像素比？
设备像素也就是物理像素：是屏幕上的一个个无法再拆分的点。
设备独立像素：是虚拟像素（横坐标轴上或纵坐标轴上的），比如某一台手机分辨率（设备像素）是480*800，纵向手持的宽度（设备独立像素）是320px，那么设备像素比就是480/320=1.5.
设备像素比：设备像素比 = 设备像素 / 设备独立像素
注意：设备独立像素 在移动端 是不一定等于 css像素px的。
6.js 动态计算rem代码
注意这里是移动端的rem适配代码，通常移动端是1rem = 10px，如果是pc端用rem适配的话，通常用的1rem = 100px，750和375可以分别改成是1920和（1024|1366），具体大小这个看需求了
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
clientWidth > 750 && (clientWidth = 750),
clientWidth < 375 && (clientWidth = 375),
// if (!clientWidth) return;
docEl.style.fontSize = 10 * (clientWidth / 750) * (window.devicePixelRatio || 1) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
若对你有帮助，请点个赞吧，谢谢支持！
本文地址：https://www.jianshu.com/p/c35ff10049b7，转载请注明出处，谢谢。
