1.网页常见单位： px em pt vw\vh rem
1.1
px单位名称为像素，相对长度单位，像素（px）是相对于显示器屏幕分辨率而言 （最终解析单位）
em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸 （相对于父元素的字体大小的单位，那如果你要设置一个元素的宽度，高度，那么就得去看他父级的大小，如果父级也是em单位，你又得去找他的父级，得一层层计算，才能得到准确的像素值~）
pt单位名称为点（Point），绝对长度单位一般老版本的table使用长度大小单位但是现在基本上没有使用
（
换算：浏览器的默认字体高度16px，1em=16px 12px相当于9pt长度
）
% 相对于父元素的大小设定的比率
1.2
css3 新增：
vw\vh 相对于视口的宽度。视口被均分为100单位的vw （ 相当精确的使用，不然偏差很大，适用于宽泛布局 ）
vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh 使得文字大小在横竖屏下保持一致
rem rem相对的是HTML根元素
参考链接：
2.rem 使用 （ 适用于等比缩放场景，当布局差异化还是得 media 来区分）
等比缩放思想 简洁代码
2.1 要点：
rem是以html为基准
主流浏览器的font-size默认值为16px 1rem=16px
浏览器支持最小字体不同 如谷歌 12px （当设置10px时，生效的是12px）
2.2 使用
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 640) {
// docEl.style.fontSize = '100px';
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
tips：如果初次加载页面闪动：由大变小
1.可以改变透明度来缓解：初始设置页面body visibility: hidden; 字体缩放完成，再弄回正常的 visibility: visible;
如：
@media (min-width: 640px){html{font-size: 85.3333px;} }
@media (min-width: 750px){html{font-size: 100px;} }
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0 />
iPhone6需要调整缩放比例 initial-scale=375/320 =1.18
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.18 />
2.4 相关链接