带你认识CSS3中新的长度单位

       众所周知，在编写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技术不断地发展，对于新技术新解决方案的要求也会不断增长，未来还可能会出现更多的长度单位！因此，作为网页设计师和前端开发人员的我们别无选择，必须不断熟悉我们手上的新工具，做到知己知彼，这样才能百战不殆。