Fork me on GitHub

rem布局

rem

rem(font size of the root element)是指相对于根元素的字体大小的单位

rem布局主要有两种形式

  • css媒体查询 设置好font-size

  • js动态计算font-size

viewport设置

1
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

rem 初始化

copy from taobao

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script>
!function (win) {
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
width / dpr > 540 && (width = 540 * dpr), win.rem = width / 16, docEl.style.fontSize = win.rem + "px"
}
var dpr, scale, tid, doc = win.document, docEl = doc.documentElement, metaEl = doc.querySelector('meta[name="viewport"]'), flexibleEl = doc.querySelector('meta[name="flexible"]');
if (metaEl) {
var match = metaEl.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);
match && (scale = parseFloat(match[2]), dpr = parseInt(1 / scale))
} else if (flexibleEl) {
var match2 = flexibleEl.getAttribute("content").match(/initial\-dpr=(["']?)([\d\.]+)\1?/);
match2 && (dpr = parseFloat(match2[2]), scale = parseFloat((1 / dpr).toFixed(2)))
}
if (!dpr && !scale) {
var k = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)), devicePixelRatio = win.devicePixelRatio;
dpr = k ? devicePixelRatio >= 3 ? 3 : devicePixelRatio >= 2 ? 2 : 1 : 1, scale = 1 / dpr
}
if (docEl.setAttribute("data-dpr", dpr), !metaEl)if (metaEl = doc.createElement("meta"), metaEl.setAttribute("name", "viewport"), metaEl.setAttribute("content", "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no"), docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
}else {
var l = doc.createElement("div");
l.appendChild(metaEl), doc.write(l.innerHTML)
}
win.dpr = dpr, win.addEventListener("resize", function () {
clearTimeout(tid), tid = setTimeout(refreshRem, 300)
}, !1), win.addEventListener("pageshow", function (e) {
e.persisted && (clearTimeout(tid), tid = setTimeout(refreshRem, 300))
}, !1), "complete" === doc.readyState ? doc.body.style.fontSize = 12 * dpr + "px" : doc.addEventListener("DOMContentLoaded", function () {
doc.body.style.fontSize = 12 * dpr + "px"
}, !1), refreshRem()
}(window);
</script>