vue移动端rem布局

rem布局主要通过修改页面html跟元素的字体大小从而导致rem与px的转换比例发生改变。

页面引入这段js

!function (e, t) { function n() { t.body ? t.body.style.fontSize = 12 * o + "px" : t.addEventListener("DOMContentLoaded", n) } function d() { var e = i.clientWidth / 10; i.style.fontSize = e + "px" } var i = t.documentElement, o = e.devicePixelRatio || 1; if (n(), d(), e.addEventListener("resize", d), e.addEventListener("pageshow", function (e) { e.persisted && d() }), o >= 2) { var a = t.createElement("body"), s = t.createElement("div"); s.style.border = ".5px solid transparent", a.appendChild(s), i.appendChild(a), 1 === s.offsetHeight && i.classList.add("hairlines"), i.removeChild(a) } }(window, document);

页面的html根字体的大小就会随着窗口宽度发生改变。

然后再main.js引入 

import flex from './flex/index'

然后就可以根据设计稿去将元素的px写成相应的rem

具体转换比例的计算就是1rem=设计稿的宽度/10px

编辑器里面有相应的转换工具可以方便计算，不用每个尺寸都去计算。

比如vscode的cssrem插件设置好转换比例，输入相应的px尺寸，就可以出现相应的rem尺寸的代码提示