一篇文章帶你搞懂流式布局

PC端進(jìn)行網(wǎng)頁制作時(shí)，經(jīng)常使用固定像素并且內(nèi)容居中的網(wǎng)頁布局，為了適應(yīng)小屏幕的設(shè)備，在移動(dòng)設(shè)備和跨平臺(tái)(響應(yīng)式)網(wǎng)頁開發(fā)過程中，多數(shù)使用流式布局，下面我們就對(duì)流式布局進(jìn)行詳細(xì)介紹。

流式布局是一種等比例縮放布局方式，在CSS代碼中使用百分比來設(shè)置寬度，也稱百分比自適應(yīng)的布局。流式布局實(shí)現(xiàn)方法是將CSS固定像素寬度換算為百分比寬度。換算公式如下: 目標(biāo)元素寬度/父盒子寬度=百分?jǐn)?shù)寬度下面通過一個(gè)案例來演示固定布局如何轉(zhuǎn)換為百分比布局，如demo4-1.html 所示。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定布局轉(zhuǎn)換為百分比布局</title>
	<style type="text/css">
		body>*{ width: 980px; height:auto; margin:0 auto;
				margin-top:10px;
				border:1px solid #000; padding:5px;}
		header{ height:50px;}
		section{ height: 300px;}
		footer{ height:30px;}
		section>*{ height:100%; border:1px solid #000; float:left;}
		aside{ width:250px;}
		article{ width:700px; margin-left:10px;}
	</style>

</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>
	<aside>aside</aside>
	<article>article</article>
</section>
<footer> footer</footer>
</body>
</html>

打開Chrome瀏覽器訪問demo4-1.html，頁面效果如下圖所示。

可以嘗試改變?yōu)g覽器窗口的大小，頁面元素的大小不會(huì)隨瀏覽器窗口改變，如下圖所示。

下面修改demo4-1樣式代碼，將所有寬度修改為百分比的形式，具體如下:

	<style type="text/css">
		body>*{ width:95%; height:auto; margin:0 auto; margin-top:10px;
               border:1px solid #000; padding :5px; }
		header{ height:50px; }
		section{ height: 300px; }
		footer{ height:30px;}
		section>*{ height:100%; border:1px solid #000; float:left; }
		aside{ width:25.510204%; /*250÷980*/}
		article{ width: 71.428571%; /*700÷980*/margin-left:1.0204088%;}
	</style>

刷新頁面，縮小瀏覽器，頁面按百分比隨瀏覽器逐漸縮小，顯示完整，頁面效果如下圖所示：

式布局

布局特征:

高度寫死，寬度自適應(yīng)。并不是百分百還原設(shè)計(jì)圖

比如：設(shè)計(jì)圖是針對(duì)320px屏幕設(shè)計(jì)的，那么只有在320設(shè)備的屏幕中，才是完美的效果，其他情況都會(huì)拉伸

小圖片、小圖標(biāo)、文字大小一般寫死

大圖片一般寬度自適應(yīng)，高度等比例縮放(例如:輪播圖)

經(jīng)典的流式布局：

左側(cè)固定，右側(cè)自適應(yīng)

方法有很多種,簡(jiǎn)單例舉3種。

一、左側(cè)固定右側(cè)自適應(yīng)-定位

步驟:

1、左側(cè)寬度寫死——》定位——》給父元素設(shè)置左padding即可

2、右側(cè)寬度不用設(shè)置（自適應(yīng)）

二、浮動(dòng)+觸發(fā)BFC

拓展：想詳細(xì)了解BFC戳這里

overflow:hidden 會(huì)觸發(fā)盒子的BFC

觸發(fā)BFC的盒子的特點(diǎn)：

解決margin的塌陷
清除浮動(dòng)
不會(huì)在浮動(dòng)元素下面，會(huì)被擠到一邊去

步驟:

1、左側(cè)寬度固定——》左浮動(dòng)

2、右側(cè)寬度是自適應(yīng)——》觸發(fā)bfc——》overflow：hidden

三、display:flex

(對(duì)flex布局不太了解的朋友可以去看看我的另一篇關(guān)于flex布局的博客)flex布局(彈性布局、伸縮布局)

步驟:

給父盒子設(shè)置為彈性盒子
左側(cè)寬度寫死
右側(cè)寬度按照份數(shù)分配父元素主軸（寬度）的剩余空間

右側(cè)固定，左側(cè)自適應(yīng)

注意:在右側(cè)固定，左側(cè)自適應(yīng)的布局中如果要使用浮動(dòng)+觸發(fā)BFC的方法,在html結(jié)構(gòu)中需要先寫右邊的盒子!!!

原因:浮動(dòng)元素受到上面元素邊界的影響,導(dǎo)致盒子上不去

兩側(cè)固定，中間自適應(yīng)（圣杯布局、雙飛翼布局）

注意:同樣在兩側(cè)固定，中間自適應(yīng)（圣杯布局、雙飛翼布局）中如果要使用浮動(dòng)+觸發(fā)BFC的方法,在html結(jié)構(gòu)中需要先寫左邊的盒子,在寫右邊盒子,中間盒子最后寫

原因:浮動(dòng)元素受到上面元素邊界的影響,導(dǎo)致盒子上不去

等分布局

按照寬度百分比可以完成，但是當(dāng)給每一個(gè)盒子設(shè)置border之后，會(huì)發(fā)現(xiàn)盒子掉下來了

只要進(jìn)行移動(dòng)端布局，盒子約定俗成都需要加上自動(dòng)內(nèi)減。

2013年底，切圖網(wǎng)接到了第一個(gè)響應(yīng)式布局的網(wǎng)站項(xiàng)目，當(dāng)時(shí)要做響應(yīng)式布局的網(wǎng)站并不多，項(xiàng)目是臺(tái)灣的一個(gè)客戶的，可能是臺(tái)灣的沒有墻的原因吧，可以很容易訪問國(guó)外很多優(yōu)秀設(shè)計(jì)的網(wǎng)站。

當(dāng)時(shí)對(duì)響應(yīng)式做了一些思考，連著這兩三年又接手了更多的響應(yīng)式布局開發(fā)項(xiàng)目，總結(jié)了自己的一些感悟，想分享出來。

為什么說網(wǎng)頁由簡(jiǎn)單到復(fù)雜在回歸簡(jiǎn)單

很多事情即使如此，網(wǎng)頁的變遷似乎也遵循了這一條規(guī)律，何為響應(yīng)式布局？最直觀的感受，就是當(dāng)我們拉伸瀏覽器寬度的時(shí)候，網(wǎng)頁的內(nèi)容會(huì)發(fā)生變化，在現(xiàn)在，這個(gè)是要通過css3 media query多媒體查詢技術(shù)來實(shí)現(xiàn)的。

其實(shí)，當(dāng)我們建立一個(gè)網(wǎng)頁，隨便打幾行字，插入幾個(gè)標(biāo)簽，它本身就是一個(gè)響應(yīng)式網(wǎng)頁，所以響應(yīng)式布局的網(wǎng)頁，盡可能設(shè)計(jì)的簡(jiǎn)單，不要有復(fù)雜的結(jié)構(gòu)，這種情況作出的響應(yīng)式標(biāo)準(zhǔn)效果又好的。

響應(yīng)式網(wǎng)站就要做流式布局嗎？

流式布局就是采用100%寬度來排版網(wǎng)頁，這樣它是可以自適應(yīng)不同屏幕寬度的，但是，實(shí)際情況是現(xiàn)在網(wǎng)頁越來越復(fù)雜，結(jié)構(gòu)越來越多樣，單單靠100%寬度是解決不了所有問題的。

最終該定寬的還是得定寬，該定高的也得定高，所以，響應(yīng)式網(wǎng)站并不是采用100%的流式布局，甚至兩者沒有直接聯(lián)系。

響應(yīng)式布局新方法（經(jīng)過本人大項(xiàng)目項(xiàng)目佐證可行）, 先看看幾個(gè)案例

流式布局響應(yīng)式

http://www.qietu.com/html/f1/imirror/

http://www2.qietu.com/html/yinshua/

http://www2.qietu.com/html/ruijiahang/

定寬方式的響應(yīng)式

http://www4.qietu.com/html/dechi/

http://www.qietu.com/html/qingkonglianyu/

目前很多項(xiàng)目響應(yīng)式網(wǎng)頁都是采用的下面這行定義

而本人在切圖網(wǎng)公司大量的項(xiàng)目中采用了另外一種方法

然后響應(yīng)式代碼這樣寫

body{

width:480px; margin:0 auto; overflow:hidden;

}

......

然后再去調(diào)整里面元素的細(xì)節(jié)樣式，讓它在手機(jī)下更好閱讀。這是一個(gè)很好的方法，并且做出的網(wǎng)頁在手機(jī)下效果很好。因?yàn)樗膶挾仁枪潭ǖ?，是可控的，編碼時(shí)候效果是可以直觀看到的。

相比于第一種方法，它的寬度很不明確，需要周全的考慮每個(gè)寬度下網(wǎng)頁每個(gè)元素的情況，這不僅需要大量的代碼，而且實(shí)際情況是很難考慮的那么周全，響應(yīng)后的效果不好。

定寬的方法我相信有部分人知道，但是沒有人敢真正用于在實(shí)際項(xiàng)目中，擔(dān)心它有bug，以及有bug沒有解決方案，都隨波逐流用了第一種方法，我想說，本著探究的精神，我把這種方法用在大量項(xiàng)目中得到佐證，可行，也遇到過bug不過都解決了。

當(dāng)然，響應(yīng)式后的手機(jī)端效果不如單獨(dú)設(shè)計(jì)手機(jī)端，如果客戶對(duì)效果要求比較高，我通常會(huì)建議單獨(dú)做一個(gè)pc版和webapp觸屏版，例如像這樣

http://www.qietu.com/html/f1/jifuguanjia/

http://www4.qietu.com/html/jifu_wap/

響應(yīng)式web布局算還是比較新的技術(shù)，還有很多待研究的地方，需要我們一起探討，歡迎加入一起討論。本人qq/微信：6135833

文/丁向明

做一個(gè)有博客的web前端自媒體人！

http://dingxiangming.com

在線咨詢

上一篇：從實(shí)際出發(fā)，普通用戶眼中的Surface Pro 3
下一篇：HTML5又迎元年影游聯(lián)動(dòng)也許能救？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商