<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rem布局</title>
<style>
#div1{width:10rem;height:10rem;background:#f45}
</style>
</head>
<body>
<div id="div1"></div>
<script>
(function(doc, win){
var docEle = doc.documentElement;
var evt = "onorichange" ? "onorichange" : "resize";
var fn = function() {
var width = docEle.clientWidth;
width && (docEle.style.fontSize = 20 * (width / 320) + "px");
}
fn();
})(document, window)
// width /320 = docEle.style.fontSize/20 ;
// 目标浏览器的宽度和320的比例 等于 目标浏览器字体大小 与 320宽度浏览器的字体大小的比值
//
// 就是定的稿子的宽度为320px宽度,设置其html根字体为font-size:20px;
//
// 设置动态比例保证 320/20 = 16 rem 等于屏幕宽度,保证其等比缩放;
</script>
</body>
</html>