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);