移动端布局的核心就是,设置好html跟标签,的动态大小
直接上代码
-
60 * 60
导航入口
-
60 * 60
导航入口
-
60 * 60
导航入口
填写信息
姓名
手机
个人介绍
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 */