移動(dòng)端布局的核心就是,設(shè)置好html跟標(biāo)簽,的動(dòng)態(tài)大小
直接上代碼
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <title>REM布局</title>
? ? ? ? <meta charset="utf-8">
? ? ? ? <meta lang="zh-CN">
? ? ? ? <meta name="viewport" data-content-max content="width=device-width,initial-scale=1,user-scalable=no">
? ? ? ? <!-- <link rel="stylesheet" href="./rem.css"> -->
? ? ? ? <script src="./rem.js"></script>
? ? ? ? <!-- <script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(normal,e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=normal?1:1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=normal?"50px": a/2*s*n+"px"},e.exports=t["default"]}]); flex(false,100, 1);</script> -->
? ? ? ? <!-- <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> -->
? ? </head>
? ? <body data-content-max>
? ? ? ? <section class="container">
? ? ? ? ? ? <header>375 * 150</header>
? ? ? ? ? ? <nav>
? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? <li style="font-size: 0.5rem;background: red;float: left;">
? ? ? ? ? ? ? ? ? ? ? ? <span class="icon">60 * 60</span>
? ? ? ? ? ? ? ? ? ? ? ? <span>導(dǎo)航入口</span>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? <span class="icon">60 * 60</span>
? ? ? ? ? ? ? ? ? ? ? ? <span>導(dǎo)航入口</span>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? <span class="icon">60 * 60</span>
? ? ? ? ? ? ? ? ? ? ? ? <span>導(dǎo)航入口</span>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </nav>
? ? ? ? ? ? <main>
? ? ? ? ? ? ? ? <h3 style="font-size: 0.4rem">填寫(xiě)信息</h3>
? ? ? ? ? ? ? ? <div class="info-items">
? ? ? ? ? ? ? ? ? ? <p class="info-item">
? ? ? ? ? ? ? ? ? ? ? ? <span>姓名</span>
? ? ? ? ? ? ? ? ? ? ? ? <input type="text" class="info-item__name" placeholder="請(qǐng)?zhí)顚?xiě)姓名">
? ? ? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? ? ? ? ? <p class="info-item">
? ? ? ? ? ? ? ? ? ? ? ? <span>手機(jī)</span>
? ? ? ? ? ? ? ? ? ? ? ? <input type="number" class="info-item__tel" placeholder="請(qǐng)?zhí)顚?xiě)手機(jī)號(hào)">
? ? ? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <h3>個(gè)人介紹</h3>
? ? ? ? ? ? ? ? <div class="info-items">
? ? ? ? ? ? ? ? ? ? <p class="info-item f-p-0">
? ? ? ? ? ? ? ? ? ? ? ? <textarea class="info-item__intro" placeholder="請(qǐng)?zhí)顚?xiě)一段簡(jiǎn)要的自我介紹"></textarea>
? ? ? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div class="info-confirm">
? ? ? ? ? ? ? ? ? ? <a href="javascript:;" class="info-confirm__btn">確認(rèn)</a>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </main>
? ? ? ? ? ? <footer>375 * 75</footer>
? ? ? ? </section>
? ? </body>
</html>
js代碼:
!(function()?{
????var?docElem?=?document.documentElement,
????????metaElem?=?document.querySelector('meta[name="viewport"]'),
????????dpr?=?window.devicePixelRatio?||?1,
????????//?將頁(yè)面分為10塊
????????blocks?=?10,
????????//?需要限制的最小寬度
????????defaultMinWidth?=?320,
????????//?需要限制的最大寬度
????????defaultMaxWidth?=?540,
????????//?計(jì)算的基準(zhǔn)值
????????calcMaxWidth?=?9999999;
????if?(!metaElem)?{
????????metaElem?=?initMetaViewport();
????}
????if?(metaElem.getAttribute('data-content-max')?!==?null)?{
????????calcMaxWidth?=?defaultMaxWidth;
????}
????//?確保meta[name="viewport"]存在
????function?initMetaViewport()?{
????????var?meta?=?document.createElement('meta');
????????meta.setAttribute('name',?'viewport');
????????meta.setAttribute('content',?'width=device-width,initial-scale=1,user-scalable=no');
????????document.head.appendChild(meta);
????????return?meta;
????}
????//?大部分dpr為2以下的安卓機(jī)型不識(shí)別scale浪谴，需設(shè)置不縮放
????if?(navigator.appVersion.match(/android/gi)?&&?dpr?<=?2)?{
????????dpr?=?1;
????}
????setScale(dpr);
????//?企業(yè)QQ設(shè)置了scale后夹姥，不能完全識(shí)別scale（此時(shí)clientWidth未收到縮放的影響而翻倍），需設(shè)置不縮放
????if?(navigator.appVersion.match(/qq\//gi)?&&?docElem.clientWidth?<=?360)?{
????????dpr?=?1;
????????setScale(dpr);
????}
????docElem.setAttribute('data-dpr',?dpr);
????//?設(shè)置縮放
????function?setScale(dpr)?{
????????metaElem.setAttribute('content',?'initial-scale='?+?1?/?dpr?+?',maximum-scale='?+?1?/?dpr?+?',minimum-scale='?+?1?/?dpr?+?',user-scalable=no');
????}
????//?設(shè)置docElem字體大小
????function?setFontSize()?{
????????var?clientWidth?=?docElem.clientWidth;
????????clientWidth?=?Math.max(clientWidth,?defaultMinWidth?*?dpr)
????????//?調(diào)整計(jì)算基準(zhǔn)值
????????if?(calcMaxWidth?===?defaultMaxWidth)?{
????????????clientWidth?=?Math.min(clientWidth,?defaultMaxWidth?*?dpr);
????????}
????????docElem.style.fontSize?=?clientWidth?/?blocks?+?'px';
????}
????setFontSize();
????window.addEventListener(window.orientationchange???'orientationchange'?:?'resize',?setFontSize,?false);
})();
最后css代碼
.f-p-0{padding:0?!important}html,body{margin:0;padding:0}html?body{margin-right:auto;margin-left:auto;min-width:320px}@media?(-webkit-device-pixel-ratio:?2){html?body{min-width:640px}}@media?(-webkit-device-pixel-ratio:?3){html?body{min-width:960px}}html?body[data-content-max]{margin-right:auto;margin-left:auto;max-width:540px}@media?(-webkit-device-pixel-ratio:?2){html?body[data-content-max]{max-width:1080px}}@media?(-webkit-device-pixel-ratio:?3){html?body[data-content-max]{max-width:1620px}}html[data-dpr="1"]?body{min-width:320px}body{border-width:45px;background-color:#f8f8f8;font-size:.3733333333rem;font-family:"Microsoft?YaHei"}.container{background-color:#fff}header{height:4rem;line-height:4rem;text-align:center;background-color:#f2f2f2}nav?ul{display:flex;justify-content:space-around;padding:0}nav?ul?li{display:flex;flex-wrap:wrap;width:2.6666666667rem;justify-content:center}nav?ul?.icon{margin-bottom:.2666666667rem;width:1.6rem;height:1.6rem;line-height:1.6rem;text-align:center;background-color:#f2f2f2}main{padding:.2666666667rem}main?h3{position:relative;margin-top:.6666666667rem;margin-left:.3466666667rem;font-size:.4rem}main?h3:before{content:"";position:absolute;left:-.2666666667rem;width:.16rem;height:100%;background-color:#fc8200}.info-items{margin-top:.2666666667rem;margin-bottom:.2666666667rem}.info-item{margin-top:.2666666667rem;padding:.4rem;padding-left:0;border:1px?solid?#ddd;display:flex}.info-item?span{min-width:1.6rem;text-align:center;border-right:1px?solid?#ddd}.info-item?input{width:100%;border:none;font-size:.3733333333rem;caret-color:#fc8200;outline:none}.info-item?textarea{padding:.2666666667rem;width:100%;border:none;height:3.3333333333rem;font-size:.3733333333rem;font-family:"Microsoft?YaHei";caret-color:#fc8200;-webkit-text-size-adjust:none;text-size-adjust:none}.info-confirm{margin-bottom:.5333333333rem;text-align:center}.info-confirm__btn{display:inline-block;margin-top:1.0666666667rem;width:2.6666666667rem;height:1.0666666667rem;line-height:1.0666666667rem;text-align:center;background-color:#fc8200;text-decoration:none?!important;color:#fff?!important}footer{height:2rem;line-height:2rem;text-align:center;background-color:#f2f2f2}
/*#?sourceMappingURL=rem.css.map?*/
