CSS3中rem是一種相對于根字體大小(即html標簽字體大小)的單位,它是相對于em的一個進化版本,它不僅可以解決em的一些比較棘手的問題,而且支持一些新特性。
html {
font-size: 16px;
}
h1 {
font-size: 2rem; /* 32px */
}
p {
font-size: 1.5rem; /* 24px */
}
在上面的代碼中,我們設置了根字體大小為16px,然后通過rem單位來設置h1元素的字體大小為2rem,即32px,而p元素的字體大小為1.5rem,即24px。
rem單位的優點有以下幾個:
- 相對于根字體大小,更加穩定;
- 可以避免嵌套時字體大小不斷疊加或出現計算錯誤的問題;
- 支持動態縮放,可以方便地實現響應式設計。
使用rem單位需要注意以下幾個問題:
- 需要設置根字體大小,通常為16px;
- 原則上只要字體大小使用rem單位,其他的尺寸都應該使用em或其他相對單位;
- IE8及以下版本不支持rem單位,需要使用polyfill或其他替代方案。