em、rem、px在Web開發中的區別
阿新 • • 發佈:2018-12-23
隨著響應式設計的不斷火熱,基於相對字型大小的單位變開始流行起來,但他們真正的區別在哪裡,有的時候會搞得暈頭轉向,在這裡我來做個總結。如果有說的不當的地方,還請各位同仁多多指教。
在說之前有兩個很重要的概念,那就是font-size具有繼承性以及body,html是根元素。
- px 這個單位的特點就是精準性。但是他的缺點就在於太過於精確從而導致使用者在拖動、改變瀏覽器的字號大小以及尺寸時,就會出錯。這樣對於那些關心自己網站可用性的使用者來說,就是一個大問題了。因此,這時就提出了使用“em”來定義Web頁面的字型。
- em 這個單位是相對於父級作為參考點而進行設定的,主要作用是為了適應不同螢幕下的字號大小。如果當前元素的父級並沒有設定字號大小,那麼此元素的基準點會被轉移到根元素上。
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 ? */
}
rem Css3的官網是這樣定義rem的 “font size of the root element” rem依舊只是相對大小,但只是相對於html根目錄的字號大小,也就是說,我只需要改變根目錄的字號大小就可以改變全域性的字號大小。而em雖說可以根據父級元素以及根元素的大小而進行改變,但卻具有一定的不確定性。推薦給大家一個 單位轉換的網站以供參考。
在這裡建議將根目錄字號大小設定為62.5%
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就不支援,解決的辦法就是px和rem一起設定。