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代碼控制
var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
var 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);