vw+vh+rem
一、vw、vh
vw、vh是基于视口的布局方案，故这个meta元素的视口必须声明。（视口宽度等于设备宽度，初始不缩放，用于解决页面宽高自动适配屏幕）
<meta name="viewport" content="width=device-width,initial-scale=1.0">
1vw等于设备宽度的1%，同理1vh等于设备高度的1%，百分比布局
无其他配置，直接使用
二、rem
相对单位，根据CSS的媒体查询功能，更改html根字体大小，实现字体大小随屏幕尺寸变化。
举例：浏览器默认html的字体大小为16px，则1rem=16px
三、px自动转换rem，postcss-pxtorem
github:https://github.com/cuth/postcss-pxtorem
npm install postcss-pxtorem -D
四、配置rem
创建rem.js，main.js引入（vue）
参考：https://www.jianshu.com/p/98ab31ed7018
(function (designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement; var tid; var rootItem, rootStyle; function refreshRem() { var width = docEl.getBoundingClientRect().width; if (!maxWidth) { maxWidth = 540; } ; if (width > maxWidth) { width = maxWidth; } //与淘宝做法不同，直接采用简单的rem换算方法1rem=100px var rem = width * 100 / designWidth; //兼容UC开始 rootStyle = "html{font-size:" + rem + ‘px !important}‘; rootItem = document.getElementById(‘rootsize‘) || document.createElement("style"); if (!document.getElementById(‘rootsize‘)) { document.getElementsByTagName("head")[0].appendChild(rootItem); rootItem.id = ‘rootsize‘; } if (rootItem.styleSheet) { rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle) } else { try { rootItem.innerHTML = rootStyle } catch (f) { rootItem.innerText = rootStyle } } //兼容UC结束 docEl.style.fontSize = rem + "px"; }; refreshRem(); win.addEventListener("resize", function () { clearTimeout(tid); //防止执行两次 tid = setTimeout(refreshRem, 300); }, false); win.addEventListener("pageshow", function (e) { if (e.persisted) { // 浏览器后退的时候重新计算 clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === "complete") { doc.body.style.fontSize = "16px"; } else { doc.addEventListener("DOMContentLoaded", function (e) { doc.body.style.fontSize = "16px"; }, false); } })(375, 750);