快速实现移动端rem布局的打开方式

前端适配，就是为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果，rem是CSS3新增的一个相对单位，相对的只是HTML根元素，因此我们需要做的是实现html标签根据屏幕的宽度的大小进行font-size字体大小的赋值，还有根据设计稿的px在代码中转化为对应的rem。

1.将以下script标签放到head头标签内，实现根据html标签进行rem的布局

<script defer>!function (e, t) { function i() { var t = n.getBoundingClientRect().width / 10; n.style.fontSize = t + "px", p.rem = e.rem = t } var a, r = e.document, n = r.documentElement, o = r.querySelector('meta[name="viewport"]'), l = r.querySelector('meta[name="flexible"]'), m = r.querySelector('meta[name="flexible-in-x5"]'), s = !0, d = 0, c = 0, p = t.flexible || (t.flexible = {}); if (o) { console.warn("将根据已有的meta标签来设置缩放比例"); var u = o.getAttribute("content").match(/initial\-scale=([\d\.]+)/); u && (c = parseFloat(u[1]), d = parseInt(1 / c)) } else if (l) { var f = l.getAttribute("content"); if (f) { var h = f.match(/initial\-dpr=([\d\.]+)/), v = f.match(/maximum\-dpr=([\d\.]+)/); h && (d = parseFloat(h[1]), c = parseFloat((1 / d).toFixed(2))), v && (d = parseFloat(v[1]), c = parseFloat((1 / d).toFixed(2))) } } if (m && (s = "false" !== m.getAttribute("content")), !d && !c) { var x = (e.navigator.appVersion.match(/android/gi), e.chrome), g = e.navigator.appVersion.match(/iphone/gi), b = e.devicePixelRatio, w = /TBS\/\d+/.test(e.navigator.userAgent), y = !1; try { y = "true" === localStorage.getItem("IN_FLEXIBLE_WHITE_LIST") } catch (e) { y = !1 } c = 1 / (d = g || x || w && s && y ? b >= 3 && (!d || d >= 3) ? 3 : b >= 2 && (!d || d >= 2) ? 2 : 1 : 1) } if (n.setAttribute("data-dpr", d), !o) if ((o = r.createElement("meta")).setAttribute("name", "viewport"), o.setAttribute("content", "initial-scale=" + c + ", maximum-scale=" + c + ", minimum-scale=" + c + ", user-scalable=no"), n.firstElementChild) n.firstElementChild.appendChild(o); else { var E = r.createElement("div"); E.appendChild(o), r.write(E.innerHTML) } e.addEventListener("resize", function () { clearTimeout(a), a = setTimeout(i, 300) }, !1), e.addEventListener("pageshow", function (e) { e.persisted && (clearTimeout(a), a = setTimeout(i, 300)) }, !1), "complete" === r.readyState ? r.body.style.fontSize = 12 * d + "px" : r.addEventListener("DOMContentLoaded", function (e) { r.body.style.fontSize = 12 * d + "px" }, !1), i(), p.dpr = e.dpr = d, p.refreshRem = i, p.rem2px = function (e) { var t = parseFloat(e) * this.rem; return "string" == typeof e && e.match(/rem$/) && (t += "px"), t }, p.px2rem = function (e) { var t = parseFloat(e) / this.rem; return "string" == typeof e && e.match(/px$/) && (t += "rem"), t } }(window, window.lib || (window.lib = {}))</script>

2.安装cssrem插件实现px转rem

小生的编译器使用的是VScode，在拓展栏查找cssrem插件进行安装

安装完成效果图：

由于cssrem插件，默认基准为16px的转化，即16px => 1rem, 而我使用的是750px的设计稿，而且我上面的script标签代码设置的750px宽度时，hmtl的字体大小为75px，这样的设置主要是为了方便查看，即当前75px的根元素 * 10rem = 750px 就刚好宽度上的满屏， 因此需将基准设置为75px，即75px => 1rem

转载于:https://my.oschina.net/u/4087316/blog/3015992