rem设置代码
rem设置原理是相对于根元素字体大小来计算的大小单位,1rem=根元素字体大小,那么我们可以通过获取当前页面宽度来设置根元素字体大小,代码如下:
(function() {
let html = document.documentElement;
let width = html.getBoundingClientRect().width;
// 通过设置一个基准数值来适配宽度,个人倾向于750这个数字
let baseNum = 750
html.style.fontSize = width / baseNum + 'px';
console.log(html.style.fontSize)
})()
这段代码首先是获取宽度,进而将宽度除750的基准值,设置根元素字体大小
例:若屏幕宽度为375px,则根元素字体大小等于rem为0.5px
至于基准值为什么要用750这个数字,这要从UI图的角度来理解
UI图设计宽度
首先掌握一个基础知识为:1px为2个物理像素,而一般情况下,UI给的设计图都是750物理像素的二倍图(实际应用在手机中即375px宽度)
那么,如果我通过设置基准值为750,则1rem=0.5px=1物理像素
于是在UI图取宽高值(物理像素)的时候,可以1:1或1:2等比设置,所以,750的基准值,仅仅是方便对接UI图对dom的宽高进行更高精度的把控
当然,你设置其他基准值并不影响屏幕适配,只不过你在对接UI图的时候,需要进一步换算。
举个栗子
以UI给的是”750物理像素设计图,750为基准数值” 为案例:
实际手机宽度 | rem | px | 物理像素 |
375px(750物理像素) | 1 | 0.5 | 1 |
480px(960物理像素) | 1 | 0.64 | 1.28 |
720px(1440物理像素) | 1 | 0.96 | 1.92 |
在不同的手机屏幕中,会根据相对应比例进行缩放,进而达到完美适配的结果。