隨著網(wǎng)絡(luò)的快速發(fā)展辽故，移動(dòng)端設(shè)備頁面也越來越重要叠蝇。但由于各個(gè)手機(jī)的屏幕大小不一涤久，那么如何讓一個(gè)頁面匹配各個(gè)頁面呢∥膛耍現(xiàn)在我們來看看下面的幾種布局方式趁冈。
注意我們要想在移動(dòng)端完美顯示效果，需要在head標(biāo)簽內(nèi)加一個(gè)viewport的meta標(biāo)簽
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
彈性盒模型布局
- 需要在父級開啟彈性盒模型：display:-webkit-box;
- 自己設(shè)置需要的大小(份數(shù))：-webkit-box-flex:1;（份數(shù)/總份數(shù)）
- 如果有固定寬度(設(shè)置好的px寬度)拜马，先剔除掉固定的寬度再按照份數(shù)劃分
- 注意 不要用浮動(dòng)和定位
我們先簡單的用一下：
<div id="box">
<div style="background:red">left</div>
<div style="background:green">center</div>
<div style="background:blue">right</div>
</div>
CSS樣式開啟彈性盒模型渗勘，并設(shè)置子級的寬度
#box{ display:-webkit-box;}
#box div{
/* 當(dāng)然了這里我們也可根據(jù)具體需求設(shè)置我們所需的大小 */
-webkit-box-flex:1;
height:300px;
}
效果如下：
- 設(shè)置子級div豎直排列（每個(gè)占一行，高度分割）：-webkit-box-orient: vertical;要給父級加哦
- 將子級div進(jìn)行倒序排列：-webkit-box-direction: reverse;要給父級加哦
<div id="box">
<div style="background: red;">1</div>
<div style="background: yellow;">2</div>
<div style="background: blue;">3</div>
<div style="background: green;">4</div>
</div>
在CSS中設(shè)置子級div所占份數(shù)俩莽，并豎直倒序排列
html,body{
height:100%;
overflow: hidden;
}
#box{
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
height:100%;
font-size:100px;
text-align: center;
color: #fff;
}
#box div{ -webkit-box-flex:1;}
效果如下：
接下來我們旺坠，回到一個(gè)老問題讓未知寬高的div，在父級內(nèi)垂直水平居中呢扮超？這里我們加深點(diǎn)難度讓一組未知寬高的div在父級內(nèi)垂直水平居中取刃。
我們不得不說的是彈性盒模型里正好有此屬性
- 讓子級元素垂直方向居中：-webkit-box-align: center;要給父級加哦
- 讓子級元素水平方向居中：-webkit-box-pack: center;要給父級加哦
<div id="box">
<div class="div1" style="background-color: lawngreen">div1</div>
<div class="div2" style="background-color: red">div2</div>
</div>
在父級元素下設(shè)置彈性盒模型和相關(guān)樣式
#box{
display: -webkit-box;
width: 300px;height: 300px;
border: 1px solid #000;
margin: 100px auto;
/* 子級水平居中 */
-webkit-box-pack: center;
/* 子級垂直居中 */
-webkit-box-align: center;
}
#box div{ width: 100px;height: 100px;}
效果如下：
流體式布局
基本思想就是：用100%來時(shí)div與父級的寬度一致并與浮動(dòng)一起（width:100%+float）；
缺點(diǎn)：每一個(gè)設(shè)備上最終的顯示效果都與設(shè)計(jì)圖有出入出刷。不完美
例(iphone4屏幕)：
<div id="wrap">
[站外圖片上傳中……(1)]
</div>
設(shè)置css樣式
*{margin: 0;padding: 0}
#wrap { width: 100%;}
#wrap img{ width: 100%;}
效果如下：
針對流體式布局的缺點(diǎn)有改進(jìn)方式璧疗，就是設(shè)置一下min-width與max-width的值（某東用的）。但依然有缺點(diǎn)馁龟，就是讓屏幕寬度大于max-width時(shí)崩侠，兩側(cè)會有留白
例：
<div id="wrap">
[站外圖片上傳中……(2)]
</div>
設(shè)置css樣式
*{margin: 0;padding: 0}
#wrap {
width: 100%;
min-width:320px;
max-width:640px;
}
#wrap img{ width: 100%;}
效果如下：
響應(yīng)式布局
基本思想就是：利用媒體查詢(@media)設(shè)置針對不同尺寸的設(shè)備展現(xiàn)不同的效果。用一套css兼容所有設(shè)備
注意寫條件的時(shí)候坷檩，從大值往小值寫却音，否則后面的會覆蓋前面的
第一種方式，將判斷條件寫在style內(nèi)
例：
<div></div>
<div></div>
<div></div>
<div></div>
CSS媒體查詢設(shè)置
/* 設(shè)置默認(rèn)的情況顯示效果 */
div{
width:25%; height: 100px;
background: red;
/* css3的盒模型屬性矢炼，內(nèi)縮系瓢，border算在寬度(width)內(nèi) */
box-sizing: border-box;
border:1px solid green;
float: left;
}
/* 平板情況顯示效果 */
@media (max-width:1023px) {
div{
width:50%; height: 100px;
background: red;
box-sizing: border-box;
border:1px solid green;
float: left;
}
}
/* 大屏手機(jī)情況顯示效果 */
@media (max-width:480px) {
div{
width:100%; height: 100px;
background: red;
box-sizing: border-box;
border:1px solid green; float: left;
}
}
效果如下：
默認(rèn)情況
平板情況
大屏手機(jī)情況
第二種方式，將判斷條件寫在head的link標(biāo)簽內(nèi)句灌，需要?jiǎng)?chuàng)建對應(yīng)的css文件
<link rel="stylesheet" href="css-1023.css" media="(min-width:1024px)">
<link rel="stylesheet" href="css-481-1023.css" media="(min-width: 481px) and (max-width: 1023px)">
<link rel="stylesheet" href="css-480.css" media="(max-width: 480px)">
相對單位布局(rem)
基本思路就是：利用rem單位八拱，就是相對于跟（html）字體的大小，來計(jì)算相應(yīng)元素的寬高
- 一般將html的font-size設(shè)置為：20px或30px或50px或100px
- 還有利用瀏覽器默認(rèn)自己大小(16px)也就是16px*62.5%=10px涯塔，這樣就是html{font-size:62.5%;}肌稻，而不是html{font-size:10px;}因?yàn)闉g覽器（PC）最小就是12px。這樣一來1rem = 10px匕荸；
我們來簡單的看一下：
<div id="wrap">
<div id="div1">我是一個(gè)div標(biāo)簽</div>
</div>
CSS設(shè)置樣式
#wrap{ font-size: 20px;}
#div1{
font-size: 1em;
width: 16em;
height: 2em;
background-color: lawngreen;
}
效果如下：
這里說一下為啥不用em爹谭，因?yàn)閑m是相對于父級字體大小的，這樣一層套一層比較麻煩榛搔，還有就是當(dāng)我想改變其中一個(gè)div的字體大小時(shí)诺凡，整個(gè)布局就亂套了
還有一個(gè)問題就是當(dāng)我們的瀏覽器窗口發(fā)生大小變化時(shí)东揣，原來的布局是不是也應(yīng)該完美的顯示呢。這里我們就利用js來根據(jù)瀏覽器可視區(qū)(clientWidth)來重新給html設(shè)置響應(yīng)的字體大小
/* 這里我們利用了一個(gè)自執(zhí)行函數(shù) */
(function(){
change();
function change(){
/* 這里的html字體大小利用了一個(gè)簡單書序公式（十字相乘）腹泌，當(dāng)我們默認(rèn)設(shè)置以屏幕320px位基準(zhǔn)此時(shí)的字體大小為20px(320 20px),那么瀏覽器窗口大小改變的時(shí)候新的html的fontSize（clientWidth 新的值）就是clientWidth*20/320 */
document.documentElement.style.fontSize = document.documentElement.clientWidth*20/320 + 'px';
}
/* 監(jiān)聽窗口大小發(fā)生改變時(shí) */
window.addEventListener('resize',change,false);})();
注意：一般情況下我們利用rem單位來設(shè)置元素的寬高就行嘶卧，沒必要頁面中的所有元素都用rem來弄（當(dāng)然了這個(gè)也得看具體需求了）
