<!DOCTYPE HTML><HTMLLang= "zh"><Head> <MetaCharSet= "UTF-8"> <title>REM Phone test</title> <Metaname= "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:1.5rem;font-size:1rem;Color:#000;Border:1px solid #ccc;text-align:Center;Background-color:#ccc; }. BD{Margin-top:1rem;Margin-bottom:. 5rem;Margin-right:-.5rem;font-size:0; }. Box{width:5rem;Height:5rem;Display:Inline-block;Margin-right:. 5rem;Margin-bottom:. 5rem; }. Blue-box{Background-color:#06c; }. Org-box{Background-color:#1fc195; } </style> </Head><Body> <Header>I'm the head.</Header> <Divclass= "BD"> <Divclass= "box Blue-box"></Div> <Divclass= "box Org-box"></Div> <Divclass= "box Blue-box"></Div> <Divclass= "box Org-box"></Div> <Divclass= "box Blue-box"></Div> <Divclass= "box Org-box"></Div> </Div> <Footer>I'm the footer.</Footer> <Script> (function(Doc, win) {varDocel=doc.documentelement, Resizeevt= 'Orientationchange' inchwindow? 'Orientationchange' : 'Resize', Recalc= function () { varclientwidth=Docel.clientwidth; if (!clientwidth)return; DocEl.style.fontSize= - *(clientwidth/ the) + 'px'; }; if (!Doc.addeventlistener)return; Win.addeventlistener (Resizeevt, Recalc,false); Doc.addeventlistener ('domcontentloaded', Recalc,false); }) (document, window); </Script></Body></HTML>
REM layout Learning, the essence is JS