css3.0 前端長度單位 px em rem vm vh vm pc pt in 你真的懂了嗎？

標籤：1.4   mobile   3.0   前端   換算   代碼   增加   bsp   預設值   

1：廢話不多說，直接看如表：

2：px就不過多介紹了，就是像素點的大小，加入您的螢幕解析度為1920，則每一個相當於每一個有橫著的1920個像素點；

3：em 為相對單位，一般以 body 內的 font-size 為基準進行定義，預設值 1em = 16px，假如說我們想使用 “1em” = “10px” 來取代預設值 “1em” = “16px”，應寫如下代碼：

body {    font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}h1 {    font-size: 2.4em; /*2.4em × 10 = 24px */}ul{　　font-size: 125%;   /* 基準變成了20px */}li {　　font-size: 1.4em;  /*1.4 × ? = 14px ? */}

但是問題來了，由於 “em” 是相對於父級元素講的，所以加入 ul 不定義基準大小，則下面的 li 將級成原本的預設值 “1em” = “16px”，但是這樣換算單位會很麻煩，但是每一個父級元素你都設定基準大小，平白地增加了無窮的代碼編輯煩惱，這該怎麼辦呢？

4：結合上面種種情況，rem 應運而生！！！在 W3C官網 上是這樣描述 rem 的——“font size of the root element” 。即當設定了 html{ font-size: 62.5%; } 後，此頁面的根單位為10px，即不管任何元素 其 1rem 都等於 “10px”.是不是很方便。

5：下面說點進階的，vw vh vm ，簡言之，不管是 移動端 Mobile 還是 PC，螢幕寬度均為100vw，螢幕高度均為100vh，有點類似與100%，但是又不同於%，因為%單位也是相對於父級的，而 vw 和 vh 都是相對於整個螢幕；

6：而說 vm 是 vw 和 vh 的補充，即當 螢幕寬 > 螢幕高，以 “螢幕高” 為基準，即 1vm = 1vh；當 螢幕高 > 螢幕寬，以 “螢幕寬” 為基準，即 1vm = 1vw； 2012年9月23號這天的相容性為：Chrome 20+, IE9+ 以及Safari 6支援！著名的CSS屬性可用性查詢網站caniuse給出了具體的相容性表，點擊這裡查看。

如果感覺不錯，點個贊啊！！！

 

css3.0 前端長度單位 px em rem vm vh vm pc pt in 你真的懂了嗎？