CSS单位-长度

css中的长度单位有很多,不同的单位在特定的需求下能够有相当不错的表现，随着css3的发布，又有了一些新的单位添加进来，使我们在做前端页面的时候能够有更多的选择，更方便快捷的达到我们预期的效果。

正题

1.px (all) ;

"px",即像素，这个单位是我们最常用的，即基于像素进行绘制的长度单位。

2.em (all)

"em" 是相对长度单位。相对于当前对象内文本的字体尺寸。假如设置 div 的字体大小为20px,那么对div设置的‘1em’就是20，那么2em 就是 2*20=40px。

"em"是基于对象标签的单位，给谁用该单位，该单位就是基于谁的字体大小。当该对象标签的字体大小发生变化时，‘em’单位长度也会跟着发生变化。

举个栗子

<ul style="font-size: 20px;">

    <li style="width: 2em; border: 1px solid #000;"> 1em </li>

    <li style="width: 4em; border: 1px solid #000;"> 2em </li>

    <li style=" font-size: 40px; width: 4em; border: 1px solid #000;"> 3em </li>

</ul>

如上，第一个li和第二个li 有继承自父集的同样的字体大小，所以每个 em 的值都是20px ,2em=40px,4em = 80px,

第三个li 由于本身字体大小改为40px了 ,所以，虽然和第二个一样设置宽度 4em ,但是真实宽度第三个为4*40 = 160px 。

3.ex (css3)

和上面的"em"一样，也是基于对象内文本的字体尺寸，不同的是，ex 单位长度是字体大小的一般也就是说对于同一标签 1em === 2ex

兼容：IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51

4.ch (css3)

该单位是相对对象文本的数字 "0" 的宽度，

例如设置一个能够正好装6个“0”的宽度即 width:6ex;

5.rem (css3)

这个就厉害啦，对于移动端的自适应布局来说，这个单位是首选。

该单位是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

例如 html 的 font-size：100px；那么 1rem 就表示 100px,

该单位的使用经常会配合 js 及 viewport meta标签一同使用，

viewport详解移步这里

利用 js ，当页面加载完成或者窗口大小改变的时候重新计算的html标签的font-size 的值，就可以达到页面自适应的效果了，

js如下（假设页面设计宽度为720px）：

function rePosition(){

    var width = document.documentElement.clientWidth;

    var ratio = width/720;

    if(width<=720){

        document.getElementsByTagName('html')[0].style.fontSize=100*ratio+"px";

    }else{

        document.getElementsByTagName('html')[0].style.fontSize="100px";

    }

}

rePosition();

window.onresize = rePosition;

6.vw/vh (css3)

该单位是基于窗口大小的单位窗口的宽度等于 100vw ，窗口的高度为 100vh，

如果想设置一个宽度为半个窗口宽度、高度为1/5 个窗口高度的div ,那么可以这样写： width: 50vw; height:20wh;

7.绝对长度单位 cm / mm

cm / mm 均为绝对单位长度 cm 即厘米 mm 即毫米。

（完）