標籤：

流布局與響應式網頁設計有什麼區別？

01-05

這倆有什麼區別？

早期的Web前端開發者中流傳著這些描述了CSS編寫方式的名詞：

  • 固定布局：顧名思義，網頁上的所有元素的尺寸一律使用px作為單位。這種布局方式對設計師和CSS編寫者來說都是最簡單的，亦沒有兼容性問題，例如，直接設定網頁的主體部分寬度為960px，某個搜索框寬度為60px等等。缺點顯而易見，即不能根據用戶的屏幕尺寸做出不同的表現。當前，大部分門戶網站、大部分企業的PC宣傳站點都採用了這種布局方式。

在移動端開發中其實也可以採用固定布局，以下列出兩種方式：

  1. 在viewport meta標籤上設置w=320，頁面的各個元素也採用px作為單位。通過用JS動態修改標籤的initial-scale使得頁面等比縮放，從而剛好佔滿整個屏幕。（見前端開發-web app 變革之rem）
  2. 設在viewport meta標籤上設置content"w=640,user-scalable=no，頁面的各個元素也採用px作為單位。由於640px超出了手機寬度，瀏覽器會自動縮小頁面至剛好全屏。（具體見content"w=640,user-scalable=no" 然後再進行固定尺寸的px設計？ - 前端開發）

  • 流式布局：
    網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設置網頁主體的寬度為80%，min-width為960px。圖片也作類似處理（width:100%, max-width一般設定為圖片本身的尺寸，防止被拉伸而失真）。這種布局方式在Web前端開發的早期歷史上，用來應對不同尺寸的PC屏幕（那是屏幕尺寸的差異不會太大），在當今的移動端開發也是常用布局方式，但缺點明顯：寬度使用百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得「流式」），顯示非常不協調。

  • 彈性布局：這類布局的特點是，包裹文字的各元素的尺寸採用em做單位，而頁面的主要劃分區域的尺寸仍使用百分數或px做單位（同「流式布局」或「固定布局」）。早期瀏覽器不支持整個頁面按比例縮放，僅支持網頁內文字尺寸的放大，這種情況下。使用em做單位，可以使包裹文字的元素隨著文字的縮放而縮放。在那時，為了使單位em更直觀，CSS編寫者常常把body元素的font-size設置為62.5%（瀏覽器默認字體大小16px*62.5%=10px），這樣1em便是10px，方便了計算。在PC端使用彈性布局的另一個理由（也許是2016年的今天的唯一的理由）可以看看EM單位的好處是什麼? - 前端開發

使用了rem單位的彈性布局在移動端也很受歡迎。對於不同尺寸的屏幕，可以統一假設屏幕寬度為640px後編寫CSS（這只是一個例子。當然你也可以假定統一為320px）。此時，我們設定html元素的font-size為40px（同樣，只是舉例），然後各處（元素尺寸、文字大小）使用rem作為單位，隨後搭配媒體查詢或JS，根據屏幕的大小來動態控制html元素的font-size（特定屏幕尺寸下，html元素的font-size應當設置為何值，是使用這個方案時設計師和程序員需要反覆考慮後確定的，以下試舉一段相關的CSS媒體查詢代碼），即可自動改變所有用rem定義尺寸的元素的大小（且CSS編寫者在腦中進行換算的計算過程比em簡單得多）。

html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}

其實在移動端使用所謂的彈性布局，是比較勉強的。移動端彈性布局流行起來的原因歸根結底是rem單位對於（根據屏幕尺寸）調整頁面的各元素的尺寸、文字大小時比較好用。其實，使用vw、vh等後起之秀的單位，可以實現完美的流式布局（高度和文字大小都可以變得「流式」），彈性布局就不再必要了。

  • 隨著CSS3出現了媒體查詢技術，又出現了響應式設計的概念。響應式設計的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、手錶、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果，對CSS編寫者而言，在實現上不拘泥於具體手法，但通常是糅合了流式布局+彈性布局，再搭配媒體查詢技術使用。

流式布局在CSS2時代就有，主要是靠百分比進行排版，可以在不同解析度下顯示相同的版式

響應式布局的關鍵技術是CSS3中的媒體查詢，可以在不同解析度下對元素重新設置樣式（不只是尺寸），在不同屏幕下可以顯示不同版式

一般來說響應式布局配合流式布局效果更好

流式布局是用於解決類似的設備不同解析度之間的兼容(一般解析度差異較少)


響應式是用於解決不用設備之間不用解析度之間的兼容問題(一般是指PC，平板，手機等設備之間較大的解析度差異)

流布局是把頁面設計成彈性的，可流動的元素，自動充滿屏幕，但由於未針對不同屏幕做區分，效果在部分屏幕上可能不好。

而響應式是監測設備屏幕大小，通過css媒體查詢來有針對性的更改頁面的布局，使得網頁在不同設備上顯示不同的內容或布局。當然也可以監測屏幕方向(移動設備)，設備類型等等，核心在於感知。

簡單籠統的理解:

流就是 一直滾動 一直有內容 跟個瀑布一樣 嘩嘩的

響應就是 我可以在pc 手機..... 上正常觀看網頁內容

推薦閱讀：

※網頁的 Table 布局和 DIV+CSS 布局從哪裡可以看出來？Table 布局已經過時了嗎？
※一般用什麼軟體來設計網站的頁面？
※如何評價「萌碼」這個網站？
※CSS 中 border-width 為何不支持百分比？
※相對於英文字體設計，中文字體設計是否更難追求形式感和可讀性的兼顧？

TAG:網頁設計 | CSS |