最近在使用 CSS 的 rem 單位時(shí)遇到一個(gè)問題，就是設(shè)置了 font-size 為基準(zhǔn)的 html 元素的大小，但是在子元素中使用 rem 單位時(shí)卻沒有生效。

html {
font-size: 16px;
}
p {
font-size: 1.2rem; /*應(yīng)該等于19.2px*/
}
/*但是在實(shí)際使用時(shí)，p元素的字體大小依舊為16px*/

經(jīng)過一番查找和實(shí)驗(yàn)，發(fā)現(xiàn)了一些可能導(dǎo)致這個(gè)問題的原因。

1. 元素沒有繼承 html 的 font-size。

/*正確示例*/
html {
font-size: 16px;
}
body {
font-size: 1rem;
}
p {
font-size: 1.2rem; /*等于19.2px*/
}
/*不僅要設(shè)置 html 的 font-size，還要確保其他元素的 font-size 使用 rem 單位*/

2. 直接使用 rem 單位而不是 em 單位。

/*錯(cuò)誤示例*/
nav {
font-size: 1.2rem;
}
nav a {
font-size: 0.8rem; /*錯(cuò)誤的使用 rem 單位*/
}
/*正確示例*/
nav {
font-size: 1.2rem;
}
nav a {
font-size: 0.8em; /*使用 em 單位，在這個(gè)元素上計(jì)算出的大小是正確的*/
}
/*注意，使用 em 單位時(shí)的基準(zhǔn)是父元素的大小，所以設(shè)置 font-size 的元素需要使用 rem 單位*/

3. 未考慮字體大小被限制的情況。

/*容器限制字體大小*/
.container {
font-size: 1rem;
max-width: 600px;
}
/*子元素的字體大小會受到限制*/
.container p {
font-size: 1.2rem; /*實(shí)際大小會小于19.2px*/
}
/*可以在父元素添加 class，統(tǒng)一計(jì)算字體大小*/
html,
body {
font-size: 16px;
}
.font-scale {
font-size: 1rem;
}
.container {
max-width: 600px;
}
/*.font-scale 類用于統(tǒng)一計(jì)算字體大小*/
.container p {
font-size: 1.2font-scale;
}

以上是一些可能導(dǎo)致 rem 單位無法生效的原因，希望對大家有所幫助。