CSS单位px,em,rem,vh,vw,vmin,vmax的区别

1. px：绝对单位，页面按精确像素展示
2. em：相对单位，以你节点字体的大小为基准，如果自身定义了font-size按自身来算（浏览器默认字体为16px），1em不是一个固定值
   a、em指字体高度：浏览器默认 1em = 16px，所以0.75em = 12px;
   i、页面上的根元素font-size:62.5%;此时em为16px*62.5 = 10em;这是显示在页面的字体大小为10px
   ii、这样，12px = 1.2em,10px = 1em,只需要将原来的px值除以10，换上em为单位即可
   b、em的特点是会根据父元素的大小变化 ，但不适合嵌套多个元素，此时用rem,基于根元素，不被父类影响
   c、之所以前端行业做移动端会普遍默认用rem或em,是因为可以通过js控制根元素(或者用@media)来达到适配各种分辨率的字体大小的效果
3. rem:相对单位，根据根节点html的字体大小来计算，可以参考rem在移动端应用可参考淘宝的页面

http://m.taobao.com (html的font-size通过动态计算获取)
!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);  flex(100, 1);

    把这段 原生JS 放到 HTML 的 head 标签中即可（注:不要手动设置viewport，该方案自动帮你设置，通过修改viewport  属性放大缩小 initial-scale）

代码原理：
这是阿里团队的高清方案布局代码，所谓高清方案就是根据设备屏幕的DPR（设备像素比，又称DPPX，比如dpr=2时，表示1个CSS像素由4个物理像素点组成） 动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值，进而达到高清效果。
代码优势：
引用简单，布局简便
根据设备屏幕的DPR,自动设置最合适的高清缩放。
保证了不同设备下视觉体验的一致性。（老方案是，屏幕越大元素越大；此方案是，屏幕越大，看的越多）
有效解决移动端真实1px问题（这里的1px 是设备屏幕上的物理像素）
rem总结：
1)两个方案默认 1rem = 100px，所以你布局的时候，完全可以按照设计师给你的效果图写各种尺寸啦。
2)绝不是每个地方都要用rem，rem只适用于固定尺寸！
3)比如你在效果图上量取的某个按钮元素长 86px, 宽27px ，那你直接可以这样写样式：
.div1{width:.85rem;height:.27rem;}

4.vw,vh,vmin,vmax主要用于页面视口大小布局，相对于rem会更方便简单
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。
vw逻辑非常清晰，“1vw ＝ 1/100th viewport width”，用viewport width的百分比来设置element width。
viewport的概念

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。
就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。
页面是基于浏览器窗口大小自动适配的如果感觉页面太大；可添加下面JS通过缩放控制页面的最大尺寸

<script type="text/javascript">
    (function(doc,win){
        var htmlScale = function(){
            console.log('2');
            oBdoy = doc.getElementsByTagName('html')[0];
            var domWidht = doc.documentElement.clientWidth;
            var myScale = 750/domWidht;
            if(domWidht){
                oBdoy.style.transform = 'scale('+myScale+')';
                oBdoy.style.transformOrigin = '50% '+0+'%';
            }else{
                oBdoy.removeAttribute('style','transform');
                oBdoy.removeAttribute('style','transformOrigin');
            }

        };
        htmlScale();
        win.addEventListener('resize',htmlScale,false);
    })(document,window);
</script>

5、ex：取当前作用效果的字体的x的高度
6、ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em

总结：
px代表物理屏幕上能显示出的最小的一个点,
em 是相对于父级的字体大小,
rem是相对于HTML根元素的字体大小,
vh 和vw相对于视口的高度和宽度,1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度