CSS—相對單位rem

一、概述

rem是一個相對長度單位，它的單位長度取決於根標簽html的字體尺寸。rem即root em的意思，中文翻譯為根em。瀏覽器的文本尺寸一般預設為16px，即預設情況下：

1rem = 16px

rem佈局原理：根據CSS媒體查詢功能，更改根標簽的字體尺寸，實現rem單位隨屏幕尺寸的變化，如下代碼所示

@media only screen and (max-width: 1600px) and (min-width: 1280px){
    html{
        font-size: 14px;
    }
}
@media only screen and (max-width: 1280px) and (min-width: 960px){
    html{
        font-size: 12px;
    }
}
@media only screen and (max-width: 960px){
    html{
        font-size: 10px;
    }
}

註意，一般使用rem方案解決移動端適配問題。IOS6以上和Android2.1以上，基本覆蓋所有流行的手機系統。 

二、詳解

通過設置根標簽的字體尺寸，可以改變rem，從而形成一個可控的統一參考系。

rem有兩種思路。其一設置rem所代表的尺寸大小與屏幕寬度成正比。其二設置rem所代表的尺寸大小與px容易換算，方便按照設計稿寫CSS，此時可以使用媒體查詢動態修改根標簽的字體尺寸來適配。

第一種思路：設置rem的大小與屏幕寬度成正比

通過JS動態設置根標簽的字體尺寸，從而改變rem的尺寸。為了方便計算，一般將rem設置為視圖寬度的十分之一。rem可以等比例適配所有解析度終端（PC端和各種移動端）

// 獲取視圖寬度
// document.documentElement是指html根節點
// document.body是指body節點
// 因為相容問題, 有時拿不到根節點的寬度就會拿body來頂替
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log(htmlWidth);
 
// 設置html標簽的font-size為視圖寬度的十分之一
let htmlDom = document.getElementsByTagName('html')[0];
console.log(htmlDom.style.fontSize);
htmlDom.style.fontSize = htmlWidth / 10 + 'px';
console.log(htmlDom.style.fontSize);

註意，使用rem+sass可以更好、更方便的適配各種解析度的移動端。

第二種思路：設置rem尺寸與px容易換算

瀏覽器的文本尺寸一般預設為16px，設置如下所示。使用媒體查詢動態修改根標簽的字體尺寸來適配不同解析度的終端。

html{
    font-size: 62.5%; /* 62.5% * 16px = 10px */
}

註意，一般PC瀏覽器規定字體尺寸最小支持12px，手機端不存在這個問題。