众所周知，在编写css过程中,我们通常要为元素的位置、尺寸精确地定义一些值。因为一个排列无序、杂乱无章的页面不可能给别人留下什么好的印象。而这时,我们就离不开长度单位的帮忙了。随着CSS的不断发展，在CSS3中引入了几个新的长度单位，今天小编就带大家一起认识它们。
一、CSS中常用的长度单位
在认识新的长度单位之前，我们不妨先温习一下常用的CSS单位
%——百分比
in——寸
cm——厘米
mm——毫米
pt——point，大约1/72寸
pc——pica，大约6pt，1/6寸
px——屏幕的一个像素点
em——元素的font-size
ex——font-size的x-height值，为小写字母x的高度，通常相当于font-size的一半
对于常用的px，小编不再多说了，就稍微提一下em和%：
.box{
line-height:1.3em;
}
元素的行高是当前元素继承的font-size的1.3倍，
.box{
line-height:130%;
}
元素的行高是当前元素继承的font-size的130%倍，等同于1.3em。
二、CSS3新引入的长度单位
首先为大家介绍一下css3新引入的长度单位：
ch——字符0(零)的宽度
rem——根元素(html元素)的font-size
vw——viewpoint width，视窗宽度，1vw等于视窗宽度的1%
vh——viewpoint height，视窗高度，1vh等于视窗高度的1%
vmin——vw和vh中较小的那个
vmax——vw和vh中较大的那个
1.rem
rem单位感觉就是px+em的变体，是否值得使用还要看你自己的取舍：没有px精确也没有em灵活。但是我们有时候想有一个基准来扩展时，可以使用rem单位，rem中的“r”代表“root”，这意味着设置当前元素的字体大小为根元素，大多数情况下，我们会设置在html元素上。
2.vh和vw
在进行响应式布局时，我们常常会使用百分比来布局，然而CSS的百分比不总是解决每个问题的最佳方案，CSS的宽度相对于离它最近的父元素的宽度。如果你想使用视窗的宽度、高度而不是父元素的宽高，可以使用vh和vw单位，这样可以保证元素的宽高适应不同设备。
3.vmin和vmax
vw和vh对应于viewport的width和height，而vmin和vmax分别对应于width、height中的最小值和最大值，例如如果浏览器的宽/高被设置为1000px/600px，那么
1vmin=600*1/100
1vmax=1000*1/100
4.ch
ch 单位通常被定义为数字0的宽度。例如将一个等宽字体的字母N的宽度设置为40ch，那么在另一种类型的字体里它却可以包含40个字母。这个单位的传统用途主要是盲文的排版。
三、浏览器支持
rem适用于IE9+、FF3.6+、Chrome、Safari5+、以及Opera11.6+，基本上各浏览器都支持了。
vw、vh、vmin、vmax浏览器支持情况并不乐观：IE9支持了，Chrome目前不支持，Chrome20将会重新支持(貌似之前支持过？)、Safari也即将支持，Opera和Firefox也还都不支持。
通过小编的介绍，你对CSS3新引入的长度单位了解了吗？随着CSS技术不断地发展，对于新技术新解决方案的要求也会不断增长，未来还可能会出现更多的长度单位！因此，作为网页设计师和前端开发人员的我们别无选择，必须不断熟悉我们手上的新工具，做到知己知彼，这样才能百战不殆。
