第七十七節，CSS3前綴和rem長度單位

時間 2019-11-12

標籤第七十七 css3 css 前綴 rem 長度單位欄目 CSS 简体版

原文原文鏈接

CSS3前綴和rem長度單位html

學習要點：
1.CSS3前綴
2.長度單位remweb

本章主要探討HTML5中CSS在發展中實行標準化的一些問題，重點探討CSS3中新屬性前綴問題和新的單位rem。瀏覽器

一 CSS3前綴
在CSS3的不少新屬性推出時，這些屬性還處在不太穩定的階段，隨時可能被剔除。而此時的瀏覽器廠商爲了實現這些屬性，採用前綴方法。各大廠商前綴列表以下：佈局

瀏覽器廠商前綴學習

Chrome、Safari -webkit-測試

Opera -o-spa

Firefox -moz-設計

Internet Explorer -ms-調試

咱們以前學習過幾個CSS3的新屬性，好比：box-shadow、border-radius、opacity 等。這幾個屬性咱們在前面的使用中，並無添加所謂的瀏覽器廠商前綴。那是由於，這些屬性已經在主流瀏覽器或版本成爲了標準。具體進化步驟以下：code

1.屬性還沒有提出，這個屬性全部瀏覽器不可用；

2.屬性被提出，但未列入標準，瀏覽器廠商經過私有前綴來支持該屬性；

3.屬性被列入標準，可使用前綴或不使用前綴來實現屬性特性；

4.屬性不須要再使用前綴，全部瀏覽器都穩定支持。

咱們就拿border-radius舉例，它是CSS3的標準屬性。早期的時候處於實驗階段，還沒有列入標準時，須要使用廠商前綴。具體瀏覽器支持度以下：

屬性　　　　瀏覽器　　　　帶前綴版本　　　　不帶前綴版本標準/實驗

border-radius IE 不支持　　　　9.0+

　　 Firefox 　　　　 3.0需帶-moz- 　　 4.0+

　　　　　　　　　　 Safari 　　　　　3.1需帶-webkit- 　5.1+ 標準

　　　　 Chrome 　　 4.0 　　　　　　 5.0+

　　　　 Opera 　　　　不支持 10.5+

若是是手機等移動端通常採用的是IOS或安卓系統，那麼基本上它的引擎是webkit，直接參考-webkit-便可。在CSS3手冊上，Chrome支持border-radius的版本爲13.0，而部分教材和文章上寫到只要5.0。固然，這裏可能表達的含義可能不一樣。而截至到2015年4月份最新的Chrome版本已經到41.0了，因此，不論是5.0仍是13.0都是老古董了，不必深究。Opera支持border-radius版本爲11.5，而目前的版本是28.0，也無傷大雅了。而被列入標準的box-shadow和opacity基本與border-radius前綴版本一致。

由於目前處在標準階段，不必寫前綴了

div { 
    border-radius: 50px; 
}

實驗階段的寫法

div { 
     -webkit-border-radius: 50px; 
     -moz-border-radius: 50px; 
     border-radius: 50px; 
}

實驗階段的寫法有三句，分別解釋一下：-webkit-表示Chrome瀏覽器的私有屬性前綴、-moz-表示Firefox私有屬性前綴，若是是處於實驗階段的舊版本瀏覽器，那麼不支持border-radius，從而經過廠商前綴的方式來支持。若是是新版瀏覽器，已是處於標準階段，那麼又有兩種說法：1.若是新版瀏覽器廢棄了前綴，那麼前綴寫法就不支持了，僅支持標準寫法；2.若是新版瀏覽器沒有廢棄前綴，那麼兩種寫法均可以，但要注意順序，且屬性值要保持一致。

若是同時出現四個前綴+一個標準寫法，四個前綴是當實驗階段時讓四種引擎的瀏覽器廠商支持本身的私有屬性，一個標準寫法表示當這個屬性列入標準後，使用新版瀏覽器運行時直接執行這個標準屬性。

前綴寫法寫在標準後面，且值不同，就會出現問題

div { 
     border-radius: 50px; 
     -webkit-border-radius:100px; 
}

特別注意：1.IE的前綴-ms-，和Opera的前綴-o-，在border-radius中不存在；2.如今的Opera瀏覽器也支持-webkit-前綴，-webkit-border-radius就能支持；3.Safari for Windows已被蘋果公司在2012年放棄，遺留版本爲5.1.7。

最後說明：W3C官方的立場表示實驗階段的屬性僅爲了測試，將來有可能修改或刪除，而大量的開發者也認爲在實際項目中不該該使用前綴，而使用一種優雅降級保證必定的用戶體驗，而經過漸進增減的方式讓新版高級瀏覽器保證最高的效果。

二長度單位rem
CSS3引入了一些新的尺寸單位，這裏重點推薦一個：rem或者成爲(根em)。目前主流的現代瀏覽器都很穩定的支持。它和em、百分比不一樣的是，它不是與父元素掛鉤，而是相對於根元素<html>的文本大小來計算的，這樣能更好的統一總體頁面的風格。

這裏作幾個解釋，咱們在以前的Web設計中大量使用了px單位進行佈局。由於，早期的固定佈局使用px較爲方便，逐漸養成了這種習慣。而使用rem單位其實更加靈活，尤爲是在修改樣式時，只須要修改一下掛鉤根元素的那個大小便可，無須每一個元素一個個修改。W3C推出了直接基於根元素單位：

html{
    font-size: 5px;
}
h1{
    font-size: 3rem;
}
h2{
    font-size: 2.5rem;
}
h3{
    font-size: 2rem;
}
h4{
    font-size: 1.5rem;
}

<h1>這是標題1</h1>
<h2>這是標題2</h2>
<h3>這是標題3</h3>
<h4>這是標題4</h4>

簡單的說就是，在html根設置一個文字大小的像素px，而後html裏面的元素用rem單位來定義，如html根元素文字大小爲5px，裏面的h1標籤爲3rem，也就是h1的文字大小是根5px的3倍，5乘以3就是15px，以此計算，這樣若是之後想改變頁面總體的大小，只須要改變根文字大小便可，由於其餘標籤會根據根大小來自適應

注意：html根文字大默認是16px，因此調試階段根通常爲16px

rem瀏覽器支持狀況

瀏覽器 rem單位

Opera 11.6+

Firefox 3.6+

Safari 5.0+

Chrome 6.0+

IE 9.0+

單位計算

要設置的像素除以根基準=rem單位

rem單位乘以根基準=像素

換算子元素寬度站父元素寬度的百分之幾，子元素寬度除以父元素寬度=子元素寬度站父元素寬度的百分之幾