理解 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

本文章由javascript技术分享原创和收集

如若转载请注明原文及出处:https://www.dsiab.com/post/2e659b6d-2d81-4144-9d90-338eafafa186
本站文章由javascript技术分享原创和收集,内容如有问题,请联系站长删除。

评论: