简单了解一下rem

「这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战」

现在越来越多的场景在使用rem实现自适应布局,如果你搞不懂rem是如何实现自适应布局以及如何根据设计稿来调整rem的值，那么不要错过这一篇。

rem的定义

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

浏览器 最小支持font-size

PC chrome 12px (可以通过安装Advanced Font Settings插件支持到6px)

Android和iOS 1px(只测试了主流浏览器，未做充分测试)

cordova(Android和iOS) 9px

目前做不同频幕适配的方案普遍有两种

一种是根据js来调整html的字号，另一种则是通过媒体查询等来调整（包括什么弹性布局 流式布局）

body { font-size:62.5%; } /* =10px */
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px*/

但是由于rem 单位相对于根元素

html { font-size: 62.5%; } /* =10px */
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */

因为在css中单位长度用的最多的是px、em、rem。

这三个的区别是：

　　- px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

　　- em和rem相对于px更具有灵活性，他们是相对长度单位，相对固定的长度，更适用于响应式布局。

一句话概括：em相对于父元素，rem相对于根元素

假设设计稿是宽750px来做的，书写css方便计算考虑，根节点的font-size假定为100px，得出设备宽为7.5rem。设计稿中标注的任何px数值都可以换算成px/100的rem值

当UI给出的业务设计稿是个固定的尺寸时候，就需要我们自己来动态计算rem的值，这样才能满足不同场景的需要，也能适配多种设备

 var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
           // 默认设计图为640的情况下1rem=100px；根据自己需求修改
            if(clientWidth>=640){
                docEl.style.fontSize = '100px';
            }else{
                docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

虽然百分比布局可实现响应式布局，但rem相当于百分比布局。动态获取当前视口宽度width，除以一个固定的数n，得到rem的值。表达式为rem = width / n ，通过此方法，rem大小始终为width的n等分。