CSS UNIT 詳解以及最佳實踐
分類
■ 絕對長度（Absolute units）：cm,mm,in,pt,pc
-
- 絕對單位之間的換算：1in = 2.54cm=25.4mm=72pt=6pc
- 絕對長度在css中的表現和其他地方都一樣， 1cm就是1cm
■ 相對長度（Relative units）：em,px,%,rem，vm，vh,vmin,vmax
-
- px是基於設備的,不同設備不同的展現，但是打印輸出設備上始終表現一致，1PX = 1/96 * inch。
- em 是基於元素最近的font-size的設定
一個元素字體為10px,1.5em=15px
html {
font-size: 10px;
border-width: 1em; /* 10px */
}
body {
font-size: 2em; /* 20px */
border-width: 1em; /* 20px, not 10px, because it follows its own font-size */
}
-
- ex是基於字體的，小寫字母的高度，使用率極小。
- 視口相對長度（Viewport units）：vm,vh，vmin，vmax
vm,vh是根據用戶的窗口大小變化，
1vh=1%* windowHeight;
1vw=1% * windowWidth
vmin:vm和vh中更小的那個,vmax：vm和vh中更大的那個x
怎麽用
一般來說印刷在紙上和顯示在屏幕上使用的是不同的單位集，下邊是一些推薦用法：
|
|
推薦 |
偶爾會用 |
不建議使用 |
|
Screen |
em,px,% |
ex |
pt,cm,mm,in,pc |
|
|
Em,cm,mm,in,pt,pc,% |
px,ex |
|
高分辨時，絕對單位在css中的表現和其他地方都一樣，在激光打印機上，1cm就是1cm，但是在低分辨率時，顯示就不盡如人意了，絕對單位最好用在高分辨率的輸出媒體，如打印機。
只在打印的時候推薦絕對單位的原因還有一個，我們從不同的距離看不同的屏幕感官不同，比如1cm你在電腦顯示屏上你看著ok，但是手機拿的近看著不好了，所以使用相對距離就更好。
最佳實踐
■ Document-level: %
html {
font-size: 100%;
}
100%的話其實用的就是瀏覽器，手機設備等的默認字體大小，這個大小是他們通過千錘百煉推敲出來的，你還瞎捉摸啥
■ Border: px
大多數情況下，邊框是不需要縮放的
■ Font-size:em
每個控件的上下文不同， em可以很靈活的控制每個控件內部的排版
■ Padding and margin: rem
很容易統一所有頁面的空白區域，每個控件的上下文不同，所以用rem比em更合適
■ Media queries: em，rem
CSS UNIT 詳解以及最佳實踐