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

Posted 2020-08-26 不会艺术的程序员不是好设计师

手机端网页现在已经发展的非常迅猛，很多公司度需要网页能兼容各种不同尺寸屏幕的手机。

下面我给大家讲讲我常用的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的比例缩放即可 也可以控制 最小宽度 跟 最大宽度。