px，em，rem，wh，vh等常用单位总结

前言

     在写页面布局的时候，元素的单位是很重要的，传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，并且拥有比较良好的兼容性。但从css3开始，增加了rem、vh、vw、vm等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的响应式页面，随之覆盖多种不同分辨率的终端，包括移动设备等。现在让我们来看下这些长度单位有什么区别。

1、px

   px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。

 .px {
            width: 100px;
            height: 100px;
            background-color:lightcoral;
        }
<div class="px">100px</div>

demo1.png px.png

2、em

    参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size，那么按自身来计算，整个页面内1em不是一个固定的值。

.em{
            font-size:10px;
            width: 10em;
            height: 10em;
            background-color:lightgreen;
        }
<div class="em">font-size:10px;width:10em</div>

em.png

3、rem

    css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。

.rem{
            font-size:10px;
            width: 6.25rem;
            height: 6.25rem;
            background-color:lightskyblue;
        }
<div class="rem">6.25rem,根字体16px</div>

rem.png

4、%

    一般宽泛的讲是相对于父元素，但是并不是十分准确。
    1、对于普通定位元素就是我们理解的父元素
    2、对于position: absolute;的元素是相对于已定位的父元素
    3、对于position: fixed;的元素是相对于ViewPort（可视窗口）
    详细看我写的另一篇文章CSS中的百分比计算方法(相对于谁)，这里就不举例了。

5、vw

    css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。
举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

.vw{
            width: 10vw;
            height: 10vw;
            background-color:blanchedalmond;
        }
 <div class="vw"></div>

vw.gif

6、vh

    css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。
举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

 .vh {
            width: 10vh;
            height: 10vh;
            background-color: lightsalmon;
        }
 <div class="vh"></div>

vh.gif

7、vm

    css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。由于现在vm的兼容性较差，这里就不做展示了。

css还有哪些长度单位？

in:寸
cm:厘米
mm:毫米
t:point，大约1/72寸
pc:pica，大约6pt，1/6寸
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

总结

本章代码
更多单位可以参考css单位