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>