理解 css rem与动态计算rem

1.rem定义？

首先css3规定1rem = html根节点的font-size，rem也就是root em简写。
为了方便计算通常设置根节点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代码

(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 = 100 * (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，转载请注明出处，谢谢。

参考:https://javaforall.cn/107904.html