rem移动端适配

何泽丰

front-end

发布于：Jul 5, 2020

|前言：什么是移动端适配？

web移动端网页跟PC端显示大小与内容不一样，因此需要适配。

而且手机设备之间屏幕尺寸不一，需要适配不同屏幕宽度的移动设备。

|常见的适配方法

viewport
rem
flex
vm/vh

|物理像素是什么

显示屏的最佳分辨率，即屏幕实际存在的像素行数乘以列数的数学表达方式，是显示屏固有的参数，不能调节，其含义是指显示屏最高可显示的像素数。物理分辨率也叫标准分辨率，是指LED显示屏显示的图像原始分辨率，也叫真实分辨率。和物理分辨率对应的是压缩分辨率，决定图像清晰程度的是物理分辨率，决定显示屏的适用范围的是压缩分辨率。物理分辨率即LED液晶板的实际分辨率，在LED液晶板上通过网格来划分液晶体，一个液晶体为一个像素点。物理分辨率越高，则可接收分辨率的范围越大，则显示屏的适应范围越广。

这里就肯定要提到Retina屏，2560X1600个像素每四个一组，输出原来屏幕的一个像素显示的大小区域内的图像。用户看到的图片与文字大小与1280x800分辨率的显示器相同，但精细度是原来的4倍。所以说Retina显示目的是为了解决画面精细度的问题而不是增加显示内容。

上图是Retina屏，下图是旧显示器。上图是我们可以发现像素边缘下图更加平滑，是使用更多的像素点来表示图形的缘故。

|rem移动端适配

定义：rem是一个css单位，这个单位比em多一个字母所以说多少有点类似。但不同的是em根据父元素显示大小，rem是相对于根标签对于px的定义来显示大小。例如说font-size = 16px表示 1rem = 16px;在移动端适配的时候设置rem可以让元素等比例放大或缩小以达到在不同设备显示一致的效果。

根据设备宽度作为基准，设置其根标签大小。我们可以通过函数来设置根标签的rem大小，并且在每次设备窗口宽度改变的时候重新计算根标签的fontsize。


!function(){
    function e(){
        var e = document.documentElement.clintWidth, 
        t = document.querySelector('html'),
        f = ( e > 750 ? 750 : e) /  ??? ;//根据实际情况设置
        t.style.fontSize = f + 'px';
    }
    e(), window.addEventListener('resize',e);
   // 当调整浏览器窗口的大小时，发生 resize 事件并重新计算参数
}