扶今追昔

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

em

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

如果字體大小是16px（瀏覽器的默認值），那么 1em = 16px

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

body {
font-size: 62.5%;
}

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

百分比

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

相對于誰

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

對于普通定位元素就是我們理解的父元素

對于position: absolute;的元素是相對于已定位的父元素（offset parent）

對于position: fixed;的元素是相對于 ViewPort

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

意外

padding、margin 如果設置了百分比，會發現左右和預期一樣，用的父元素寬度的百分比，但是用的也是 ** 寬度 ** 百分比，而不是想象中的高度的百分比

后代元素繼承的是百分比 計算后的值 ，而不是原百分比，這個對于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+ 和現代瀏覽器都已經支持

瀏覽器兼容性

寫的時候介紹了一些，大神寫了測試頁面可以幫我們直觀的看到

http://s.codepen.io/chriscoyier/fullgrid/CiwFD?type=embed&safe=true

參考

7 CSS Units You Might Not Know About

CSS的長度單位

你可能不知道的7個CSS單位

轉載于:https://www.cnblogs.com/gongzhujiademao/articles/4221587.html

總結

以上是生活随笔為你收集整理的你可能没注意的CSS单位 BY:色拉油啊油的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。