答: 1)px 像素(Pixel)。絕對單位。像素 px 是相對于顯示器屏幕分辨率而言的,是一個虛擬長度單位,是計算 機系統的數字化圖像長度單位,如果 px 要換算成物理長度,需要指定精度 DPI。
2)em 是相對長度單位,相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置, 則相對于瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小,因此并不是一個固定的值。
1.5em = 父級字體大小 * 1.5 = ?
3)rem 是 CSS3 新增的一個相對單位(root em,根 em),使用 rem 為元素設定字體大小時,仍然是相對大小, 但相對的只是 HTML 根元素。
1.5rem = 默認字體大小 (比如: 16px) * 1.5 = 24px
默認字體大小是依據你網站當前訪問時所使用的瀏覽器或者其他設備來決定的,對于桌面瀏覽器默認是16px的字體大小。然后你現在要轉換當前元素的字體大小為rem的時候你就可以這樣做:
28px = 28/16 = 1.75rem
為了更方便的進行計算轉換,你可以把默認字體大小設置成62.5%或者是10px,這個時候你要計算當前元素字體大小的時候,你就可以這樣:
28px = 28/10 = 2.8rem
4)區別:IE 無法調整那些使用 px 作為單位的字體大小,而 em 和 rem 可以縮放,rem 相對的只是 HTML 根 元素。這個單位可謂集相對大小和絕對大小的優點于一身,通過它既可以做到只修改根元素就成比例地調整所有 字體大小,又可以避免字體大小逐層復合的連鎖反應。目前,除了 IE8 及更早版本外,所有瀏覽器均已支持 rem。
兼容性寫法:
因為chrome和其他主流瀏覽器的最小字體大小默認是12px。
html {font-size: 62.5%;}其實并沒有設置成10px
所以可以成100px,再去使用rem單位
html {
font-size: 100px;
}
p { font-size: 15px; font-size: 0.15rem; } /* =15px */
總結:
區別 | 單位 | 相對于 | 是否可縮放 |
---|---|---|---|
px(像素) | 絕對 | 顯示器屏幕分辨率 | IE無法調整 |
em | 相對長度 | 當前對象內文本字體尺寸 | 可縮放 |
rem | 相對單位 | HTML根元素 | 可縮放(IE8以上支持) |