前端流式布局的特點(diǎn)是頁面寬度根據(jù)屏幕自適配調(diào)整，但整體布局不變。建企業(yè)網(wǎng)站時(shí)經(jīng)常用到，代表作柵欄系統(tǒng)（網(wǎng)格系統(tǒng)）。網(wǎng)頁中主要的劃分區(qū)域的尺寸使用百分?jǐn)?shù)（搭配min-*、max-*屬性使用），例如，設(shè)置網(wǎng)頁主體的寬度為80%，min-width為960px。圖片也作類似處理（width:100%, max-width一般設(shè)定為圖片本身的尺寸，防止被拉伸而失真）。

1. 流式布局特點(diǎn)
前端流式布局屏幕分辨率變化時(shí)，頁面里元素的大小會(huì)變化而但布局不變。
弊端：如果屏幕太大或者太小都會(huì)導(dǎo)致元素?zé)o法正常顯示。

2. 流式布局設(shè)計(jì)方法
前端流式布局使用%百分比定義寬度，高度大都是用px來固定住，可以根據(jù)可視區(qū)域 (viewport) 和父元素的實(shí)時(shí)尺寸進(jìn)行調(diào)整，盡可能的適應(yīng)各種分辨率。往往配合 max-width/min-width 等屬性控制尺寸流動(dòng)范圍以免過大或者過小影響閱讀。

前端流式布局在Web前端開發(fā)的早期歷史上，用來應(yīng)對(duì)不同尺寸的PC屏幕（那時(shí)屏幕尺寸的差異不會(huì)太大），在當(dāng)今的移動(dòng)端開發(fā)也是常用布局方式。

缺點(diǎn)表現(xiàn)在：主要的問題是如果屏幕尺度跨度太大，那么在相對(duì)其原始設(shè)計(jì)而言過小或過大的屏幕上不能正常顯示。因?yàn)閷挾仁褂?百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機(jī)下顯示效果會(huì)變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”），顯示非常不協(xié)調(diào)。