CSS3的REM設置字體大小——筆記
阿新 • • 發佈：2017-08-15
放大 plus ont ie6 css3 出現問題 oot 5% blog
px單位
比較穩定精確，但在瀏覽器中放大縮小頁面時會出現問題：用戶改變瀏覽器字體，會使頁面布局被打破，因此提出使用“em”
em單位
它需要一個參考點，一般以<body>的“font-size”為基準。比如使用“1em”來改變默認值“1em=16px”,這樣一來，設置字體“14px”時，只需要將其設置為“1.4em”
body { font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/ } h1 { font-size: 2.4em; /*2.4em × 10 = 24px */ } p { font-size: 1.4em; /*1.4em × 10 = 14px */ } li { font-size: 1.4em; /*1.4 × ? = 14px ? */ }
為什麽“li”的“1.4em”是不是“14px”是一個問號呢，因為“em”是一個相對值，相對於父元素，其真正計算公式是：
1 ÷ 父元素的font-size × 需要轉換的像素值 = em值
rem單位
CSS3的出現，引進了新的單位rem——font size of the root element。rem是相對於根元素<html>，意味著我們只需要確定一個參考值。
html { font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/ } body { font-size: 1.4rem;/*1.4 × 10px = 14px */ } h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/ }
rem在瀏覽器中的兼容性
IE6-8無法支持，其他主流均可
原文鏈接：http://www.w3cplus.com/css3/define-font-size-with-css3-rem
CSS3的REM設置字體大小——筆記