前言
響應式布局的很多解決方案都相當複雜，但是本節中的方法卻非常簡單。該方法通過在3個浮動元素上設定min-width和max-width屬性來實作響應式布局。隻要采用CSS中這個非常簡單的響應式布局特性，就能夠适應移動裝置和不同尺寸的計算機螢幕。
準備工作
在極小視窗的限制下，把浮動元素的多個列合并顯示為一個列并不是什麼新鮮的玩意，在很多年前就已經成為CSS1的一個标準屬性。但是在移動裝置普及之前，該屬性一直被認為沒有多大的作用。接下來我們使用這個老舊的狀态屬性，結合一些新的CSS屬性來實作響應式布局。
實作方式
建立一個簡單的根元素為article的HTML頁面，其中包含一個h1的頭元素及三個div元素。第一個div元素包含一張圖檔，第二個和第三個div元素包含一些文本内容。給這三個元素都設定float類，然後再分别設定其ID為one、two及three：
接下來，為.article元素建立對應的樣式，并賦予屬性值width:100%;、max-width:1280px;以及自動的側邊距值。然後将h1标題居中。設定img元素屬性為width:100%和height:auto;，使得該元素自适應于父元素。而對于含有img的外部浮動元素，設定屬性min-width的值為500px。當然，也可以給每個浮動元素設定不同的背景色，進而讓它們更容易辨識。但是對于響應式布局來說，這不是必需的。對于已經設定過.float類的浮動元素，可以添加max-width:350px的屬性值，并同時設定向左浮動。為了進一步看得更清楚，設定文本為兩端對齊。

當這一切都完成以後，現在你隻需要在浏覽器中打開HTML頁面，接下來會看到頁面布局非常平滑地從三列變為兩列，最終隻有單列的布局方式。具體的效果見下面的截圖。