rem移动端自适配

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

px、rem、em简介

• px是像素，是相对单位，它是相对于屏幕分辨率而言，不会因为页面大小而改变；
• rem是相对于根元素（也就是html元素）字体大小的单位，所以当根元素的字体大小改变时，其相应的rem对应的值也会变化；
• em是相对于父元素的字体大小的，所以需要知道父元素的字体大小才能进行转化，如没有设置字体大小，则向上查找。

所以，rem单位最适合用来做移动端适配。

rem移动端适配原理简介

刚我们已经大概了解了rem单位，那么根据rem进行移动端适配，主要是要参照html元素的字体大小，rem适配就是让html元素的字体大小根据分辨率进行动态改变。

resize事件是当浏览器窗口大小改变时会触发的事件，我们通过监听resize事件（也即是当浏览器窗口大小变化的时候），使用js动态改变不同分辨率下对应的根元素的字体大小，大致的实现思路如下：

<script>
    let docElement = document.documentElement;
    function setRemUnit() {
       docElement.style.fontSize = docElement.clientWidth/10+ 'px';
    }
    setRemUnit();
    window.addEventListener('resize', setRemUnit);
</script>

上述代码中，我们首先获取document.documentElement元素，然后通过其就可以拿到屏幕宽度clientWidth，如果是在iphone6手机上，clientWidth的值为750px，那么通过上面代码中的setRemUnit函数，我们将clientWidth除以10，即可以设置根元素字体大小为75px，那么1rem也就是75px，10rem即是750px，也就是全屏的宽度。如果分辨率改变为800，那么其根元素字体大小将会被设置成80px，同样，10rem即是800px，也是全屏。所以只要更改不同分辨率下的字体大小就可以做到适配。

px2rem

设计稿是使用px为单位进行交付，我们开发的时候，如果手动进行px到rem的换算就比较麻烦，所以项目中都是直接使用px来进行开发，然后在使用工具将px转化为rem。 在项目webpack配置中，可以使用postcss-px2rem工具来将px转换为rem，转化时以75px为1rem进行转化即可。

目前，随着viewport的流行，rem移动端自适应的方案慢慢被取代，后面也会总结下使用viewport来进行移动端自适配的方案。