rem页面
<style>
html {
font-size: 100px;
}
div {
/* 相对于 100px */
font-size: 1rem;
}
</style>
<div>
rem单位
</div>
flexible
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>版心布局</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
<script> (function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; function setBodyFontSize() { if (document.body) { document.body.style.fontSize = 12 * dpr + "px"; } else { document.addEventListener("DOMContentLoaded", setBodyFontSize); } } setBodyFontSize(); function setRemUnit() { var rem = docEl.clientWidth / 10; docEl.style.fontSize = rem + "px"; } setRemUnit(); window.addEventListener("resize", setRemUnit); window.addEventListener("pageshow", function (e) { if (e.persisted) { setRemUnit(); } }); if (dpr >= 2) { var fakeBody = document.createElement("body"); var testElement = document.createElement("div"); testElement.style.border = ".5px solid transparent"; fakeBody.appendChild(testElement); docEl.appendChild(fakeBody); if (testElement.offsetHeight === 1) { docEl.classList.add("hairlines"); } docEl.removeChild(fakeBody); } })(window, document); </script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
</div>
<script>
window.onload = function () {
setFont();
window.addEventListener("resize", function () {
setFont();
})
function setFont() {
var div = document.querySelector("div");
div.style.fontSize = document.querySelector("html").style.fontSize;
div.innerHTML = "html的字体大小为" + document.querySelector("html").style.fontSize;
}
}
</script>
</body>
</html>
标签：function,style,rem,window,淘宝,var,flexible,document From： https://www.cnblogs.com/fly-s/p/18383619