CSS3新的字體尺寸單位rem


CSS3引入新的字體尺寸單位 rem ,可以簡單記憶為root rm。

CSS3的出現,他同時引進了一些新的單位,包括我們今天所說的rem。在W3C官網上是這樣描述rem的——“font size of the root element” 。下面我們就一起來詳細的了解rem。

em單位是相對於父節點的font-size,會有一些組合的問題,而rem是相對於根節點(或者是html節點),意思就是說你可以在html節 點定義一個單獨的字體大小,然后所有其他元素使用rem相對於這個字體的百分比進行設置,這樣就意味着,我們只需要在根元素確定一個參考值,在根元素中設 置多大的字體,這完全可以根據您自己的需,大家也可以參考下圖:

我們來看一個簡單的代碼實例:

  1. html {
  2. font-size:62.5%;/*10 ÷ 16 × 100% = 62.5%*/
  3. }
  4. body {
  5. font-size:1.4rem;/*1.4 × 10px = 14px */
  6. }
  7. h1 {
  8. font-size:2.4rem;/*2.4 × 10px = 24px*/
  9. }

我在根元素中定義了一個基本字體大小為62.5%(也就是10px。設置這個值主要方便計算,如果沒有設置,將是以“16px”為基准 )。從上面的計算結果,我們使用“rem”就像使用“px”一樣的方便,而且同時解決了“px”和“em”兩者不同之處。

瀏覽器的兼容性

rem是CSS3新引進來的一個度量單位,大家心里肯定會覺得心灰意冷呀,擔心瀏覽器的支持情況。其實大家不用害怕,你可能會驚訝,支持的瀏覽器還 是蠻多的,比如:Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可憐的IE6-8不支持。
不過使用單位設置字體,可不能完全不考慮IE了,如果你想使用這個REM,但也想兼容IE下的效果,可你可考慮“px”和“rem”一起使用,用”px”來實現IE6-8下的效果,然后使用“Rem”來實現代瀏覽器的效果。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM