轉載：你可能沒注意的CSS單位

標籤：blog   http   io   ar   os   使用   sp   strong   on   

出自：http://www.cnblogs.com/dolphinX/p/4097693.html

 

扶今追昔

CSS中的單位我們經常用到px、pt、em、百分比，px和pt不用多說

em

em是相對單位，參考物是父元素的font-size，具有繼承的特點

如果字型大小是16px（瀏覽器的預設值），那麼 1em = 16px

這樣使用換算很複雜，尤其是和px對應，大家總結出了經驗

body {
font-size: 62.5%;
}

這樣之後 1em = 10px 在布局等使用的時候好換算了很多

百分比

百分比也是很常見的用法，看似簡單其實有些初學者可能注意不到的知識

相對於誰

首先要明確百分比是相對於誰，寬泛的講是父元素，但是並不是十分準確

1. 對於普通定位元素就是我們理解的父元素
2. 對於position: absolute;的元素是相對於已定位的父元素（offset parent）
3. 對於position: fixed;的元素是相對於 ViewPort

viewport：可視視窗，也就是瀏覽器的window那麼大

意外

1. padding、margin 如果設定了百分比，會發現左右和預期一樣，用的父元素寬度的百分比，但是用的也是 ** 寬度 ** 百分比，而不是想象中的高度的百分比
2. 後代元素繼承的是百分比 計算後的值 ，而不是原百分比，這個對於line-height的時候經常會遇到坑，還有這樣的面試題問你line-height設定為120%和1.2的區別

CSS3開啟新時代rem

em是個很不錯的單位，但是有個問題就是可能會帶來混亂，因為em依賴於父元素的字型大小，各個元素父元素的字型尺寸不一定一樣，會帶來布局上很大的不確定性

rem font size of the root element

rem相對於根項目html（網頁），這樣使用起來就安全了很多

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/}

IE9+ 和現代瀏覽器都已經支援了

vw和vh

• vw Viewport寬度， ** 1vw ** 等於viewport寬度的1%
• vh Viewport高度， ** 1vh ** 等於viewport高的的1%

vw和vh會隨著viewport變化自動變化，再也不用js控制全屏神馬的了

甚至有些人喪心病狂的字型大小都用vw和vh控制，來達到字型和viewport大小同步的效果

IE10＋ 和現代瀏覽器都支援這兩個單位

vmin和vmax

這兩個單位是針對vw和vh

• vmin vw和vh中比較 ** 小 ** 的值
• vmax vw和vh中比較 ** 大 ** 的值

這兩個屬性也會隨著viewport變化

IE10+ 和現代瀏覽器都已經支援vmin

webkit瀏覽器之前不支援vmax，現在已經支援，所有現代瀏覽器已經支援，但是IE ** 全部 ** 不支援vmax

ch和ex

這兩個單位時根據 ** 當前font-family ** 的相對單位

• ch 字元0的寬度
• ex 小寫字元x的高度

當font-family改變的時候這兩個單位的值也會變化，不同字型表現的樣式不一樣

IE9+ 和現代瀏覽器都已經支援

轉載：你可能沒注意的CSS單位