移动手机端网页布局 经常使用的3种方式 总结

手机端网页如今已经发展的很是迅猛，不少公司度须要网页能兼容各类不一样尺寸屏幕的手机。

下面我给你们讲讲我经常使用的3放布局方式：

1：响应式布局。

    能够用px做为像素，网页进行平铺。全屏的用100%。高度能够用px写死，宽度能够用百分比。无论网页怎么拉伸，高度不变，宽度会相应的扩大。

   

2：em/rem  方式布局。

能够设置好html，body的字体大小，而后用不一样的尺寸手机访问的时候，咱们能够去修改body的字体大小，网页（网页的内容用rem设置宽度、高度）的以内容会自动进行缩放。

代码如：

body{ background:#f6f6f6;}
.header{ padding:0px 0.2rem; position:relative; text-align:center; font-size:0.3rem; height:0.7rem; line-height:0.7rem; background:#f6f6f6; border-bottom:1px solid #d8d4d4;}
.header .menuSite{ position:absolute; width:0.36rem; height:0.27rem; background:url(../images/index_05.png) no-repeat; background-size:contain; top:.21rem; right:.2rem;}
.blank20 {
display: block;
height: .2rem;
background:none;
}
.sg_case,.wx_baodian{ padding-bottom:0.2rem; background:#fff;}
h2.baseTitle{
padding: .26rem .2rem;
height: .37rem;
line-height: .37rem;
color: #222222;
text-align:center;
position:relative;
}

 

问题：那若是 去根据屏幕的不一样尺寸 修改body字体大小呢？

通常有两种方式：

1：用js控制：

function a() {

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + "px";

}

window.addEventListener("resize", a, !1);

a();

2：用媒体查询方式控制字体大小：

@media only screen and (max-width: 359px) {
html {
font-size:12px
}
}

@media only screen and (min-width: 360px) and (max-width: 374px) {
html {
font-size:13.5px
}
}

@media only screen and (min-width: 375px) and (max-width: 399px) {
html {
font-size:14.0625px
}
}

@media only screen and (min-width: 400px) and (max-width: 413px) {
html {
font-size:15px
}
}

@media only screen and (min-width: 414px) and (max-width: 479px) {
html {
font-size:15.525px
}
}

@media only screen and (min-width: 480px) and (max-width: 539px) {
html {
font-size:18px
}
}

@media only screen and (min-width: 540px) and (max-width: 639px) {
html {
font-size:20.25px
}
}

@media only screen and (min-width: 640px) and (max-width: 719px) {
html {
font-size:24px
}
}

@media only screen and (min-width: 720px) {
html {
font-size:27px
}
}

 

3.能够按照设计稿的宽 高 来写css，而后经过js判断不一样尺寸屏幕，修改<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> 里面 scale的比例大小。

好比设计稿是 640 * 1136

咱们能够按 640宽度写网页 也能够按320宽度写网页。

而后 <meta name="viewport" content="width=320,initial-scale=1,user-scalable=no">

默认宽度能够设置为你写网页的宽度。

而后再经过js 来控制scale的比例缩放便可 也能够控制 最小宽度 跟 最大宽度。