rem布局 

 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>

 

posted @ 2016-04-29 14:40  挥刀  阅读(191)  评论(0)  编辑  收藏  举报