px、em和rem的區別和使用案例
1.首先介紹一下px
px就是css中最基本的長度單位了,用px做單位基本上沒什麼問題,可以做到讓頁面按套路精確的展現!
可但是!但可是!如果全篇用px佈局會暗藏一個蛋疼的問題,就是當用戶和Ctrl滾頁面的時候(說白了就是ctrl+,ctrl-),你會發現頁面結構產生了不可預知的錯亂,因此有磚家倡導使用em替代px。。。。。
2.接下來介紹一下em
如果你從上到下閱讀此文,你應該已經知道了em出現的原因,下面說說em的特性,簡單的講px是絕對單位,1px就是1px,2px就是2px,以此類推,而em是相對單位,em相對的基準點就是瀏覽器的字型大小,瀏覽器預設字型大小是16px,也就是1em預設等於16px,如果你想給某個文字設定為14px,就這樣寫 font-size:0.875em;
這時候有人和我一樣就會抱怨了,我的數學是體育老師教的,除以16我怎麼可能算明白,那好辦你可以在根節點<html>上重定義基準字號 html {font-size:62.5%} ,此時頁面基準字號就是 16px * 62.5% = 10px , 那麼此時 1em = 10px,那麼此時14px = 1.4em,15px=1.5em,依次類推,就算你數學是要飯的教的應該也會算了吧-。-!
可但是!但可是!問題又來了,em準確的說是相對於父節點的字號來計算的,如果自身定義了字號那麼就相對自身字號來計算,舉例如下:
html { font-size: 100%; } .box-0 { height: 1em; /* 此時height等於16px */ } .box-1 { font-size: 0.625em; /* 此時基準字號以變更為16*0.625=10px */ height: 1em; /* 此時實際height等於10px */ }
看明白了吧,在整個頁面內1em並不是一個固定不變的值,1em不停的變換,再加上數學是體育老師教的,這不是自作孽嗎。。。沒關係,css3為我們引入一個新的單位就是rem可以解決這個問題
3.最後介紹一下主角rem
rem和em一樣也是一個相對單位,為了方便理解,我們就理解rem為root em,顧名思義rem只相對跟節點<html>計算,這就是說只要在根節點設定好參考值,那麼全篇的1rem都相等,計算方式同em,預設1rem=16px; 同理你可以設定html { font-size:62.5% } 那麼1rem就等於10px,以此類推。。。
宣告一下:rem是css3屬性,沒錯!這就是說屌絲ie678不支援rem屬性,只有chrome、firefox等高富帥支援!那麼我們就在ie678中用px做相容處理,例如:
.box { font-size: 14px; /* 用來相容ie678 */ font-size: 0.875em; }