单位 px/em/rem/vw/wh/%/vm/rpx

一、单位

1. px(pixel)像素

px就是一张图片最小的一个点，比如电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。缺点是没有弹性

2. em

参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

3. rem

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

4.vw（viewpoint width）视窗宽度

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

5.vh（viewpoint height）视窗高度

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

6.%

一般宽泛的讲是相对于父元素，但是并不是十分准确。

1、对于普通定位元素就是我们理解的父元素

2、对于position: absolute;的元素是相对于已定位的父元素

3、对于position: fixed;的元素是相对于ViewPort（可视窗口）

7.vm

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

8.rpx

rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px。

二、运用场景

1. vh vw vm实际应用场景

vh vw是不包含页面滚动条的视窗宽度(innerwidth)，%包含了滚动条的宽度在里面了。

一般的情况下%就可以满足大部分自适应设计的需求，可以用height:100vh做一个高度占满屏幕的自适应，没有滚动条。

用vw，vh设定的大小只和视窗大小有关，所以常用于开发多种屏幕设备的应用。

2.移动端 rem自适应布局 （750的设计稿）

引用rem.js

如果页面的宽度超过了750px，那么页面中html的font-size恒为100px，否则，页面中html的font-size的大小为：100 * (当前页面宽度 / 750)

(function(doc, win) {

    var docEl = doc.documentElement,

        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

        recalc = function() {

            var clientWidth = docEl.clientWidth;

            if (!clientWidth) return;

            if (clientWidth >= 750) {

                docEl.style.fontSize = '100px';

            } else {

                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

            }

        };

        if (!doc.addEventListener) return;

        win.addEventListener(resizeEvt, recalc, false);     

        doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);