深入CSS布局一

響應式布局等於流動網格布局，而自適應布局等於使用固定分割點來進行布局

自適應布局：給了你更多設計的空間，因為你只用考慮幾種不同的狀態。使用 @media **查詢給不同尺寸和介質的裝置切換不同的樣式。在優秀的響應範圍設計下可以給適配範圍內的裝置最好的體驗，在同乙個裝置下實際還是固定的布局。

響應式布局：你得考慮上百種不同的狀態。雖然絕大部分狀態差異較小，但仍然也算做差異。通常是糅合了流式布局+彈性布局，再搭配**查詢技術使用。可以把響應式布局看作是流式布局和自適應布局設計理念的融合。

不管是響應式還是自適應，在學會使用media query之前，我覺得應該要先學好如何實現寬度、字型自適應、流式布局、彈性布局等。關於以上提到的思想，阮一峰的部落格裡面簡明扼要地講述了自適應布局：

自適應網頁設計

總結一下

有兩點還是要說明一下，

個人覺得真的沒必要太區分於「響應式」和「自適應」的概念，大多數提到響應式或者自適應，實際上核心技術還是**查詢，因為它就是重點。但如果非要做個區分，那就是以上所講的內容了。

有些大廠反而不採用響應式布局的做法，而是為移動端和pc端做了兩套系統，分別來維護。可以看看這篇文章：為什麼css響應式不是主流？但也不是說 css 級別的響應式一無是處，對於中小型**來說，這也是乙個不錯的選擇，因為它快速有效，沒有時間和精力部署兩套系統**複雜度不是很高的情況下，其實css級別的響應式是個不錯的選擇。

第一篇文章，我們暫時拋開**查詢，先來講講流式布局。

不依賴於js，如何在不修改dom結構的前提下調整布局？

設計方案：所有參與布局的div都用float，寬度都用百分比表示，字型用em或者rem

rem

rem是css3新增的乙個相對單位（root em，根em），這個單位引起了廣泛關注。這個單位與em有什麼區別呢？區別在於使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是html根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層復合的連鎖反應。目前，除了ie8及更早版本外，所有瀏覽器均已支援rem。對於不支援它的瀏覽器，應對方法也很簡單，就是多寫乙個絕對單位的宣告。這些瀏覽器會忽略用rem設定的字型大小。

p

基於浮動的流式布局

等比例縮放布局

建立等比縮放布局就是將網頁分成幾欄，然後用比例而非畫素設定它們的寬度。


lang
="en"
>
>
charset
="utf-8"
>
>
hangge.comtitle
>
>
*.leftcolumn
.rightcolumn
style
>
head
>
>
class
="leftcolumn"
>
left
div>
class
="rightcolumn"
>
right
div>
body
>
html
>

外邊距的寬度設定

使用流式布局時，除了欄寬要使用百分比設定，外邊距也必須使用百分比（不能使用固定畫素值），確保欄寬+外邊距=100%。

下面在左側、右側以及欄目間各新增2%的外邊距

.leftcolumn .rightcolumn

邊框的設定

由於邊框是新增在元素的外圍，而且邊框寬度不接受百分比值，直接在欄上設定固定寬度的邊框會破壞流式布局。

解決辦法是在等比縮放的欄裡額外增加乙個div元素，把邊框設定到這個div元素上。

注意這裡的content寬度會自動填滿父級盒。


lang
="en"
>
>
charset
="utf-8"
>
>
hangge.comtitle
>
>
*body
.leftcolumn
.rightcolumn
.colomncontent
style
>
head
>
>
class
="leftcolumn"
>
class
="colomncontent"
>
left
div>
div>
class
="rightcolumn"
>
class
="colomncontent"
>
right
div>
div>
body
>
html
>

彈性布局其實包含了流式布局和網格布局，是css3提出來的一種非常好用的布局方案，缺點是瀏覽器相容性差。但是也是一種必學的布局方案。在這篇文章先不詳細描述了。

可以通過阮一峰的部落格學習語法和實戰：

flex布局教程語法篇

flex布局教程例項篇

深入CSS布局一

CSS布局一布局模型

深入css布局 2 定位與浮動

css布局總結（一）

深入CSS布局 一

CSS布局 一 布局模型

深入css布局 2 定位與浮動

css布局總結（一）

相關推薦

深入CSS布局一

CSS布局一布局模型