整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
PC端進行網頁制作時，經常使用固定像素并且內容居中的網頁布局，為了適應小屏幕的設備，在移動設備和跨平臺(響應式)網頁開發過程中，多數使用流式布局，下面我們就對流式布局進行詳細介紹。
流式布局是一種等比例縮放布局方式，在CSS代碼中使用百分比來設置寬度，也稱百分比自適應的布局。 流式布局實現方法是將CSS固定像素寬度換算為百分比寬度。換算公式如下: 目標元素寬度/父盒子寬度=百分數寬度 下面通過一個案例來演示固定布局如何轉換為百分比布局，如demo4-1.html 所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定布局轉換為百分比布局</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，頁面效果如下圖所示。
可以嘗試改變瀏覽器窗口的大小，頁面元素的大小不會隨瀏覽器窗口改變，如下圖所示。
下面修改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>
布局特征:
高度寫死，寬度自適應。并不是百分百還原設計圖
比如：設計圖是針對320px屏幕設計的，那么只有在320設備的屏幕中，才是完美的效果，其他情況都會拉伸
小圖片、小圖標、文字大小一般寫死
大圖片一般寬度自適應，高度等比例縮放(例如:輪播圖)
經典的流式布局：
左側固定，右側自適應
方法有很多種,簡單例舉3種。
步驟:
1、左側寬度寫死——》定位——》給父元素設置左padding即可
2、右側寬度不用設置（自適應）
拓展：想詳細了解BFC戳這里
overflow:hidden 會觸發盒子的BFC
觸發BFC的盒子的特點：
步驟:
1、左側寬度固定——》左浮動
2、右側寬度是自適應——》觸發bfc——》overflow：hidden
(對flex布局不太了解的朋友可以去看看我的另一篇關于flex布局的博客)flex布局(彈性布局、伸縮布局)
步驟:
右側固定，左側自適應
注意:在右側固定，左側自適應的布局中如果要使用浮動+觸發BFC的方法,在html結構中需要先寫右邊的盒子!!!
原因:浮動元素受到上面元素邊界的影響,導致盒子上不去
兩側固定，中間自適應（圣杯布局、雙飛翼布局）
注意:同樣在兩側固定，中間自適應（圣杯布局、雙飛翼布局）中如果要使用浮動+觸發BFC的方法,在html結構中需要先寫左邊的盒子,在寫右邊盒子,中間盒子最后寫
原因:浮動元素受到上面元素邊界的影響,導致盒子上不去
等分布局
按照寬度百分比可以完成，但是當給每一個盒子設置border之后，會發現盒子掉下來了
只要進行移動端布局，盒子約定俗成都需要加上自動內減。
2013年底，切圖網接到了第一個響應式布局的網站項目，當時要做響應式布局的網站并不多，項目是臺灣的一個客戶的，可能是臺灣的沒有墻的原因吧，可以很容易訪問國外很多優秀設計的網站。
當時對響應式做了一些思考，連著這兩三年又接手了更多的響應式布局開發項目，總結了自己的一些感悟，想分享出來。
為什么說網頁由簡單到復雜在回歸簡單
很多事情即使如此，網頁的變遷似乎也遵循了這一條規律，何為響應式布局？最直觀的感受，就是當我們拉伸瀏覽器寬度的時候，網頁的內容會發生變化，在現在，這個是要通過css3 media query多媒體查詢技術來實現的。
其實，當我們建立一個網頁，隨便打幾行字，插入幾個標簽，它本身就是一個響應式網頁，所以響應式布局的網頁，盡可能設計的簡單，不要有復雜的結構，這種情況作出的響應式標準效果又好的。
響應式網站就要做流式布局嗎？
流式布局就是采用100%寬度來排版網頁，這樣它是可以自適應不同屏幕寬度的，但是，實際情況是現在網頁越來越復雜，結構越來越多樣，單單靠100%寬度是解決不了所有問題的。
最終該定寬的還是得定寬，該定高的也得定高，所以，響應式網站并不是采用100%的流式布局，甚至兩者沒有直接聯系。
響應式布局新方法（經過本人大項目項目佐證可行）, 先看看幾個案例
流式布局響應式
http://www.qietu.com/html/f1/imirror/
http://www2.qietu.com/html/yinshua/
http://www2.qietu.com/html/ruijiahang/
定寬方式的響應式
http://www4.qietu.com/html/dechi/
http://www.qietu.com/html/qingkonglianyu/
目前很多項目響應式網頁都是采用的下面這行定義
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=yes">
而本人在切圖網公司大量的項目中采用了另外一種方法
<meta name="viewport" content="width=480">
然后響應式代碼這樣寫
body{
width:480px; margin:0 auto; overflow:hidden;
}
......
然后再去調整里面元素的細節樣式，讓它在手機下更好閱讀。這是一個很好的方法，并且做出的網頁在手機下效果很好。因為它的寬度是固定的，是可控的，編碼時候效果是可以直觀看到的。
相比于第一種方法，它的寬度很不明確，需要周全的考慮每個寬度下網頁每個元素的情況，這不僅需要大量的代碼，而且實際情況是很難考慮的那么周全，響應后的效果不好。
定寬的方法我相信有部分人知道，但是沒有人敢真正用于在實際項目中，擔心它有bug，以及有bug沒有解決方案，都隨波逐流用了第一種方法，我想說，本著探究的精神，我把這種方法用在大量項目中得到佐證，可行，也遇到過bug不過都解決了。
當然，響應式后的手機端效果不如單獨設計手機端，如果客戶對效果要求比較高，我通常會建議單獨做一個pc版和webapp觸屏版，例如像這樣
http://www.qietu.com/html/f1/jifuguanjia/
http://www4.qietu.com/html/jifu_wap/
響應式web布局算還是比較新的技術，還有很多待研究的地方，需要我們一起探討，歡迎加入一起討論。本人qq/微信：6135833
文/丁向明
做一個有博客的web前端自媒體人！
http://dingxiangming.com
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
