1、px：绝对单位，页面按精确像素展示
2、em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
em的特点 em是个相对值 他会根据父级元素的大小而变化 但是如果嵌套了多个元素 要计算它的大小,是件很头疼的事情。这样的情况下,就出现了rem rem的区别在于它是相对于根基元素的,因此不会被它的父类影响到
3、rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。// 是截止目前用的最多也是最流行的
rem在移动端应用可参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取)
方案一：简单常用版本
页面基准750px;html font-size值的计算：
(function(doc,win){
var htmlFont=function(){
var docEl=doc.documentElement,l=docEl.clientWidth,f;
f=l/7.5;
l>750?docEl.style.fontSize=100+"px":docEl.style.fontSize=f+"px"
};
htmlFont();
win.addEventListener("resize",htmlFont,false)
})(document,window);
注：把这段 原生JS 放到 HTML 的 head 标签中即可(需设置meta缩放比1:1）
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
方案二：rem 进阶版--高清方案
和上面一下还是把这段 原生JS 放到 HTML 的 head 标签中即可（注:不要手动设置viewport，该方案自动帮你设置，通过修改viewport 属性放大缩小 initial-scale）
!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);
格式化版本：
!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);
代码原理：
这是阿里团队的高清方案布局代码，所谓高清方案就是根据设备屏幕的DPR（设备像素比，又称DPPX，比如dpr=2时，表示1个CSS像素由4个物理像素点组成） 动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值，进而达到高清效果。
代码优势：
引用简单，布局简便
根据设备屏幕的DPR,自动设置最合适的高清缩放。
保证了不同设备下视觉体验的一致性。（老方案是，屏幕越大元素越大；此方案是，屏幕越大，看的越多）
有效解决移动端真实1px问题（这里的1px 是设备屏幕上的物理像素）
总结：
1)两个方案默认 1rem = 100px，所以你布局的时候，完全可以按照设计师给你的效果图写各种尺寸啦。
2)绝不是每个地方都要用rem，rem只适用于固定尺寸！
3)比如你在效果图上量取的某个按钮元素长 86px, 宽27px ，那你直接可以这样写样式：
.div1{width:.85rem;height:.27rem;}
高清方案问题总结详看: https://github.com/ant-design/ant-design-mobile/issues/732
高清方案问题和参考: https://zhuanlan.zhihu.com/p/25552482
4、vw、vh、vmin、vmax 主要用于页面视口大小布局，相对于rem;v*在页面布局上更加方便简单
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。
vw被支持的太晚是其并不流行的根本原因，而当时移动端web app/page的开发需求已经十分旺盛，弹性布局是一种不错的移动端界面兼容展现方式，对于rem机遇就此而来，便成为一个实现弹性布局效果的极佳方案。
其实看目前状况，对vw最不利的是Android Browser，ndroid Browser 4.4以下的用户是不兼容的，目前新版x5更新后，安卓版微信的vw vh vmin vmax 已经没有兼容性问题了，那么随着时间推移，相信未来vw将会流行。
网友评论