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更合适
