CSS—相對單位rem

先斬意中人發表於2023-04-19
CSSREM

一、概述

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，手機端不存在這個問題。

相關文章