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- 1em; /* 10px */

}

body {

  font-size: 2em; /* 20px */

  border- 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
Print	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