移動手機端網頁佈局 經常使用的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的比例縮放便可 也能夠控制 最小寬度 跟 最大寬度。