1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>rem布局</title>
6 <style>
7 #div1{width:10rem;height:10rem;background:#f45}
8 </style>
9 </head>
10 <body>
11 <div id="div1"></div>
12 <script>
13 (function(doc, win){
14 var docEle = doc.documentElement;
15 var evt = "onorichange" ? "onorichange" : "resize";
16 var fn = function() {
17 var width = docEle.clientWidth;
18 width && (docEle.style.fontSize = 20 * (width / 320) + "px");
19
20 }
21 fn();
22 })(document, window)
23
24
25 // width /320 = docEle.style.fontSize/20 ;
26
27 // 目标浏览器的宽度和320的比例 等于 目标浏览器字体大小 与 320宽度浏览器的字体大小的比值
28 //
29 // 就是定的稿子的宽度为320px宽度,设置其html根字体为font-size:20px;
30 //
31 // 设置动态比例保证 320/20 = 16 rem 等于屏幕宽度,保证其等比缩放;
32
33
34 </script>
35 </body>
36 </html>
