逆天人物rem – 有爱前端

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>rem phone test</title> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <style> html { height: 100%; width: 100%; font-family: 'Heiti SC', 'Microsoft YaHei'; font-size: 20px; overflow: hidden; outline: 0; -webkit-text-size-adjust:none; } body { height: 100%; margin: 0; overflow: hidden; -webkit-user-select: none; position: relative; } header, footer { width: 100%; line-height: .3rem; font-size: .2rem; color: #000; border: 1px solid #ccc; text-align: center; background-color: #ccc; } .bd { font-size: 0; margin:0.0333rem -.0333rem; } .box { width:1.0777rem; height:1.0777rem; display: inline-block; overflow:hidden; box-sizing:border-box; position:relative; } .box span{position:absolute; top:0; right:0; bottom:0; left:0; margin:0.0333rem;} .blue-box span{ background-color: #06c; } .org-box span{ background-color: #1fc195; animation:aa 2s linear infinite } @media screen and (max-width:320px){ .box{width:2.154rem; height:2.154rem;} } </style> </head> <body> <header>我是头部</header> <div class="bd"> <div class="box blue-box"><span></span></div> <div class="box org-box"><span></span></div> <div class="box blue-box"><span></span></div> <div class="box org-box"><span></span></div> <div class="box blue-box"><span></span></div> <div class="box org-box"><span></span></div> <div class="box blue-box"><span></span></div> <div class="box org-box"><span></span></div> <div class="box blue-box"><span></span></div> <div class="box org-box"><span></span></div> <div class="box blue-box"><span></span></div> <div class="box org-box"><span></span></div> </div> <footer>我是页脚</footer> <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 逆天人物rem