原文：Responsive Design in 3 Steps
譯文：響應式設計的三個步驟
譯者：dwqs
現在，響應式Web設計無疑是非常流行的。如果你對響應式設計還不熟悉，可以看看我之前發表過的關於這方面的responsive sites。對於新人，responsive design可能聽起來有點複雜，但實際上，它比你想的要簡單的多。為了幫助你快速入門響應式Web設計，我寫了一篇快速入門教程。我保證你通過三步就可以學會響應式設計的基本邏輯和媒體查詢(media query)(假設你有基本的CSS知識)。
第一步：Meta標籤（看demo）
大部分移動瀏覽器會把HTML頁面縮放成較寬的viewport的寬度，這樣內容就可以屏幕上正確的展示了。你可以使用viewport這個meta標籤 來重置這個行為。下面的viewport標籤告訴瀏覽器使用設備寬度(device-width)做為viewport的寬度，並且禁用初始的縮放比例。 在<head>中加入這個meta標籤。
meta name="viewport" content="width=device-width, initial-scale=1.0">
IE 8以及更早版本不支持媒體查詢，你可以使用media-queries.js或者respond.js來增加IE對媒體查詢的支持。
<!--[if lt IE 9]>
第二步：HTML結構
在這個例子中，我擁有一個由頭部，內容容器，側邊欄，以及一個底部構成的基本的頁面佈局。頭部擁有一個固定的180px高度，內容容器600px寬，然後側邊欄是300px寬。
第三步：媒體查詢
CSS3 media query是進行響應式設計的戲法，它跟寫if條件一樣，來告訴瀏覽器對於特定的viewport寬度如何渲染頁面。
下面的規則是針對視口寬度小於等於980px設計的。基本上，我把所有容器的寬度從像素值改成了百分比值，這樣容器就會變得具有流動性(fluid)。
然後對於寬度小於或等於700px的viewport，指定#content和#sidebar為自動寬度，並且移除浮動，所以他們可以以全寬度進行展示。
相關推薦
