移动端布局的核心就是,设置好html跟标签,的动态大小
直接上代码
<!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>导航入口</span>
</li>
<li>
<span class="icon">60 * 60</span>
<span>导航入口</span>
</li>
<li>
<span class="icon">60 * 60</span>
<span>导航入口</span>
</li>
</ul>
</nav>
<main>
<h3 style="font-size: 0.4rem">填写信息</h3>
<div class="info-items">
<p class="info-item">
<span>姓名</span>
<input type="text" class="info-item__name" placeholder="请填写姓名">
</p>
<p class="info-item">
<span>手机</span>
<input type="number" class="info-item__tel" placeholder="请填写手机号">
</p>
</div>
<h3>个人介绍</h3>
<div class="info-items">
<p class="info-item f-p-0">
<textarea class="info-item__intro" placeholder="请填写一段简要的自我介绍"></textarea>
</p>
</div>
<div class="info-confirm">
<a href="javascript:;" class="info-confirm__btn">确认</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,
// 将页面分为10块
blocks = 10,
// 需要限制的最小宽度
defaultMinWidth = 320,
// 需要限制的最大宽度
defaultMaxWidth = 540,
// 计算的基准值
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以下的安卓机型不识别scale，需设置不缩放
if (navigator.appVersion.match(/android/gi) && dpr <= 2) {
dpr = 1;
}
setScale(dpr);
// 企业QQ设置了scale后，不能完全识别scale（此时clientWidth未收到缩放的影响而翻倍），需设置不缩放
if (navigator.appVersion.match(/qq\//gi) && docElem.clientWidth <= 360) {
dpr = 1;
setScale(dpr);
}
docElem.setAttribute('data-dpr', dpr);
// 设置缩放
function setScale(dpr) {
metaElem.setAttribute('content', 'initial-scale=' + 1 / dpr + ',maximum-scale=' + 1 / dpr + ',minimum-scale=' + 1 / dpr + ',user-scalable=no');
}
// 设置docElem字体大小
function setFontSize() {
var clientWidth = docElem.clientWidth;
clientWidth = Math.max(clientWidth, defaultMinWidth * dpr)
// 调整计算基准值
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 */
网友评论