移动端rem适配理解

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

 

在不同的手机屏幕中，会根据相对应比例进行缩放，进而达到完美适配的结果。