隨著移動(dòng)設(shè)備的使用越來越廣泛，網(wǎng)站的自適應(yīng)也成為了越來越重要的一部分。在CSS中，使用rem可以實(shí)現(xiàn)自適應(yīng)的效果。
rem（root em）是相對(duì)于根元素的字體大小的單位。在HTML中，根元素即為<html>標(biāo)簽。因此，我們可以在根元素中設(shè)置字體大小，然后使用rem作為其他元素的字體大小單位，從而實(shí)現(xiàn)自適應(yīng)效果。
html {
font-size: 16px; /* 設(shè)定根元素字體大小為16px */
}
p {
font-size: 1rem; /* 其他元素使用1rem作為字體大小 */
}以上代碼表示在根元素中設(shè)置字體大小為16px，其他元素的字體大小使用1rem，即相同于16px。如果根元素的字體大小改變了，其他元素的字體大小也會(huì)跟著改變。
除了字體大小外，rem還可以用于其他屬性的尺寸設(shè)置，如寬度、高度、邊框大小等等。與字體大小相同，設(shè)置寬度為1rem相當(dāng)于設(shè)置為根元素字體大小的大小，從而實(shí)現(xiàn)自適應(yīng)效果。
div {
width: 10rem; /* 寬度為根元素字體大小的10倍 */
height: 5rem; /* 高度為根元素字體大小的5倍 */
border: 1px solid #ccc; /* 邊框大小為1px */
}使用rem實(shí)現(xiàn)自適應(yīng)效果可以避免在不同設(shè)備上顯示不同的問題，并且代碼量也相對(duì)較少。但需要注意的是，在設(shè)置根元素的字體大小時(shí)，需要考慮到用戶是否已經(jīng)自定義了瀏覽器的默認(rèn)字體大小，以免影響用戶體驗(yàn)。
上一篇css用.引用