【CSS3學習筆記】13：瀏覽器相容性字首,新單位rem
阿新 • • 發佈：2019-02-19
本節學習了CSS3中的新屬性字首和新的長度單位rem。
字首
CSS3中一些新屬性推出時，還不太穩定，隨時可能被修改或者刪除，瀏覽器廠商為了使用它們就要採用自己的字首。
Chrome字首-webkit-(手機端的引擎也一般都是webkit，如要加字首也是加-webkit-)，Opera字首-o-，Firefox字首-moz-，IE字首-ms-。當屬性被提出，但未列入標準時，瀏覽器廠商通過私有的字首來實現這個屬性，列入標準後就的屬性就不要加字首了。
*在webkit引擎的瀏覽器上測試
<!DOCTYPE html>
<html lang="zh-cn">
<head @charset "utf-8";
div{
width: 200px;
height: 200px;
background 執行結果：
可以看到雖然屬性border-radius已經列入標準了，但這個屬性加上這個字首後對這類瀏覽器還是可用的(尚未剔除字首的寫法)。
假設這個屬性暫時是沒有列入標準的，如果需要讓這樣的屬性被多個瀏覽器相容，而且希望屬性字首被剔除後這句話還不失效，可以寫成下面這樣的好幾句(把字首寫法寫在前面，標準寫法寫在最後)：
@charset "utf-8";
div{
width: 200px;
height: 200px;
background: silver;
-webkit-border-radius 新單位rem
rem即”根em”，它不是相對於父元素，而是相對於根元素(html元素)而言的，利於計算和統一頁面風格。以前用px是因為習慣了固定佈局大小，但在現在不那麼適合了，所以現在多用相對於父元素的em，但有時候相對於根元素的rem可以避免複雜的運算，直接瞭解它相對於html標籤的長度是多少倍就可以了。
*測試程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>CSS3字首和新單位rem</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>我是標題<em>小標題</em></h1>
<p>我是段落，我是<code>程式碼</code></p>
</html>@charset "utf-8";
html{
font-size: 62.5%;/*根元素變成62.5%(預設16px時現在也就是10px)*/
}
h1{
font-size: 3em;/*h1元素本來有自己的大小(相對於html),現在放大3倍*/
}
p{
font-size: 1.4em;/*p元素沒有自己大小(繼承父元素標籤),現在變成1.4倍*/
}
/*想讓code為11px,它相對於html標籤是1.1倍*/
code{
font-size: 1.1rem;/*如果還是使用rem那麼計算量太大了*/
}執行結果：
