CSS: rem

.rem是（font size of the root element）

一般都是body的font-size为基准，即rem是相对于根元素。

• 字体单位

　　根据html根元素大小而定，同样可以作为宽度，高度等单位

• 适配原理

　　将px替换位rem，动态修改html的font-size适配

 

使用 rem 单位来定义文字的大小最大的问题在于这些值有点难以使用。让我们来看一个例子，假设根元素的文字大小是 16px，我们常用的文字大小转换为 rem 值如下：

• 10px = 0.625rem

• 12px = 0.75rem

• 14px = 0.875rem

• 16px = 1rem (base)

• 18px = 1.125rem

• 20px = 1.25rem

• 24px = 1.5rem

• 30px = 1.875rem

• 32px = 2rem

动态修改font-size:

媒体查询方式

@media screen and (max-width: 360px) and (min-width: 321) {
    html : {font-size: 24px}
}

@media screen and (max-width: 320px) {
    html : {font-size: 20px}
}

js代码控制

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

let htmlDom=document.getElementByTagName('html')[0];

htmlDom.style.fontSize = htmlWidth/10 +'px';

 sass计算

@function px2rem($px) {
    $rem: 37.5px;//基准值，iPhone为参考375/10
    @return ($px / $rem) _rem;
}

width: px2rem(50px);