css 相對單位rem詳解


 

 

CSS3新增了一個相對單位rem(root em,根em),這個單位引起了廣泛關注。這個單位與em有什么區別呢?區別在於使用rem為元素設定字體大小時,仍然是相對大小,但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點於一身,通過它既可以做到只修改根元素就成比例地調整所有字體大小,又可以避免字體大小逐層復合的連鎖反應。目前,除了IE8及更早版本外,所有瀏覽器均已支持rem。對於不支持它的瀏覽器,應對方法也很簡單,就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。

CSS3的出現,他同時引進了一些新的屬性,包括我們今天所說的rem。在W3C官網上是這樣描述rem的——“font size of the root element” 。

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

例子:

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*/ } p {font-size:14px; font-size:1.4rem;}/*IE8及之前版本的IE瀏覽器使用14像素*/

根元素中定義了一個基本字體大小為62.5%(也就是10px。設置這個值主要方便計算,如果沒有設置,將是以“16px”為基准 )。

從上面的計算結果,我們使用“rem尺寸字體”就像使用“px尺寸字體”一樣的方便。

這完全可以根據您自己的需,大家也可以參考下圖:

在用戶使用“查看 > 文字大小”菜單調整網頁文本大小的時候,IE9及更早版本只能縮放以相對單位設定的文本(使用像素之類的絕對單位設定的文本無法縮放)。換句話說,使用rem單位在IE7和IE6中存在一個小小的副作用,那就是這些瀏覽器的用戶必須使用“查看 > 縮放”來調整整個頁面的大小。當然,這也算一個應該升級到現代瀏覽器的原因吧。

 
 
EM特點
 
  1. em的值並不是固定的;
  2. em會繼承父級元素的字體大小。
所以我們在寫CSS的時候,需要注意兩點:
  1. body選擇器中聲明Font-size=62.5%;
  2. 將你的原來的px數值除以10,然后換上em作為單位;
  3. 重新計算那些被放大的字體的em數值。避免字體大小的重復聲明。 也就是避免1.2 * 1.2= 1.44的現象。
 
比如說你在#content中聲明了字體大小為1.2em,那么在聲明p的字體大小時就只能是1em,而不是1.2em, 因為此em非彼em,它因繼承#content的字體高而變為了1em=12px。
 
例子
 
html { font-size: 100%; }
.box-0 {
    height: 1em; /* 此時height等於16px */
} www.111cn.net
.box-1 { 
    font-size: 0.625em; /* 此時基准字號以變更為16*0.625=10px */ 
    height: 1em; /* 此時實際height等於10px */
}

  


免責聲明!

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



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