響應網頁設計是一件大事，現在是沒有疑問的。如果您還不熟悉響應式設計，查看我最近發布的響應站點列表。新手，響應式設計可能聽起來有點復雜，但它實際上比你想的簡單。為了幫助你快速地開始與響應的設計，我已經把一個快速教程。我保證你可以在3步了解響應式設計和媒體查詢的基本邏輯（假設你有基本的CSS知識）。

步驟1。元標簽

大多數移動瀏覽器的HTML頁面寬規模視口的寬度正好適合在屏幕上。你可以使用視口元標簽重置。在視口標簽告訴瀏覽器使用設備寬度為視口的寬度和禁用的初始規模。在<頭>中包含此元標記。

<meta name=“視口”content=“寬度=設備寬度，初始規模= 1”>

互聯網瀏覽器8或以上不支持媒體查詢。你可以使用media-queries.js或respond.js在IE添加媒體查詢支持

<！[如果它是9個]

<腳本src=“HTTP：/ / CSS3 mediaqueries JS。googlecode。COM / SVN /軀干/ CSS3 mediaqueries。JS”> < /腳本>

<！[判斷]——>

步驟2。HTML結構

在這個例子中，我有一個標題，基本的網頁布局內容的容器，側邊欄和頁腳。標題有一個固定的高度180px，內容容器為600px寬和側邊欄是300px寬。

IMG

步驟3。媒體查詢

CSS3媒體查詢響應的設計技巧。它就像是寫如果條件告訴瀏覽器如何呈現頁指定視口的寬度。

下面的規則將如果視口的寬度980px或不生效。基本上，我把所有的容器的寬度從像素值到百分之值，這樣容器就會變成液體。

IMG

然后700px視口或更少，指定#內容和#邊欄自動寬度和去除浮所以他們將顯示為全寬。

IMG

對于480px或更少（手機屏幕），該#頭高度自動復位，改變字體大小24px H1和隱藏#邊欄。

IMG

你可以像你一樣寫很多的媒體查詢。我在演示中只顯示了3個媒體查詢。該媒體查詢的目的是應用不同的CSS規則來實現不同的布局指定視口的寬度。媒體查詢可以在相同的樣式表或在一個單獨的文件。