viewport
http://www.cnblogs.com/2050/p/3877280.html
web-app-rem
http://isux.tencent.com/web-app-rem.html
http://121.40.99.17/global/rem-phone.html
1 <!DOCTYPE html> 2 <html lang="zh"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>rem phone test</title> 7 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 8 <style> 9 html { 10 height: 100%; 11 width: 100%; 12 font-family: 'Heiti SC', 'Microsoft YaHei'; 13 font-size: 20px; 14 overflow: hidden; 15 outline: 0; 16 -webkit-text-size-adjust:none; 17 } 18 body { 19 height: 100%; 20 margin: 0; 21 overflow: hidden; 22 -webkit-user-select: none; 23 position: relative; 24 } 25 header, 26 footer { 27 width: 100%; 28 line-height: 1.5rem; 29 font-size: 1rem; 30 color: #000; 31 border: 1px solid #ccc; 32 text-align: center; 33 background-color: #ccc; 34 } 35 .bd { 36 margin-top: 1rem; 37 margin-bottom: .5rem; 38 margin-right: -.5rem; 39 font-size: 0; 40 } 41 .box { 42 width: 5rem; 43 height: 5rem; 44 display: inline-block; 45 margin-right:.5rem; 46 margin-bottom: .5rem; 47 } 48 .blue-box { 49 background-color: #06c; 50 } 51 .org-box { 52 background-color: #1fc195; 53 } 54 </style> 55 56 </head> 57 58 <body> 59 60 <header>我是头部</header> 61 62 63 <div class="bd"> 64 <div class="box blue-box"></div> 65 <div class="box org-box"></div> 66 <div class="box blue-box"></div> 67 <div class="box org-box"></div> 68 <div class="box blue-box"></div> 69 <div class="box org-box"></div> 70 </div> 71 72 73 <footer>我是页脚</footer> 74 75 <script> 76 (function (doc, win) { 77 var docEl = doc.documentElement, 78 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 79 recalc = function () { 80 var clientWidth = docEl.clientWidth; 81 if (!clientWidth) return; 82 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; 83 }; 84 85 if (!doc.addEventListener) return; 86 win.addEventListener(resizeEvt, recalc, false); 87 doc.addEventListener('DOMContentLoaded', recalc, false); 88 })(document, window); 89 </script> 90 </body> 91 92 </html>