響應式佈局，説穿了就是用css寫了好幾套的樣式，當屏幕大小不同的時候，讀取不同的樣式而已。例如：
@media screen and (max-width: 300px) {
body {
background-color:red;
}
}
和
@media screen and (min-width: 700px) {
body {
background-color:lightblue;
}
}
這兩個的意思，就是當屏幕最大寬度是300的時候，body的背景是紅色；當屏幕最小寬度是700的時候，body的背景是淡藍色。在@media這個大括號中，你只要按照平常的css一樣寫就行了
2.學寫響應式網站,應該要怎麼寫1、學習CSS3的基礎知識。
2、學習相關的媒體查詢，如拼圖前端框架對屏幕大小的響應方式：
@media (min-width:760px){.container{width:750px;}}
@media (min-width:1000px){.container{width:1000px;}}
@media (min-width:1200px){.container{width:1200px;}}
分別是平板、桌面、寬屏下的.container下的寬度。
3、學習下網格系統，具體可參考：結構，如下圖所示：可以説這是一個很典型的博客模版結構。
一個wrapper容器包含了頭部、內容、側欄、底部。2、Meta標籤 其次就需要我們針對移動設備加入這個meta標籤。
告訴webkit內核瀏覽器初始縮放比例為1。（很多iOS和Android的瀏覽器都是基於webkit內核的） IE8或者更早的瀏覽器並不支持Media Query。
你可以使用media-queries.js或者respond.js來為IE添加Media Query支持。如果你的網站頁面中用了html5文檔聲明，用到了很多html5標籤，但是這些標籤在ie9以下版本是不支持的，所以我們必須引用一個html5.js文件使得這些標籤被其它低版本瀏覽器確認。
3、媒介查詢-Media Queries 在這裏馬海祥就不再詳細的講正常頁面下的佈局如何寫了。在此主要講解下媒體查詢media queries這個css的設計思路。
這個是css3的屬性，也是我們這個響應式網頁設計的最重要的部分。可以説是響應式設計的核心。
它根據條件告訴瀏覽器如何為指定視圖寬度渲染頁面。下面我們用CSS3的媒介查詢（Media Query）特性使得網頁適應不同設備，即根據設備的分辨率和縮放自動重新佈局。
@media screen and (max-width: 480px) { 這裏就是重新設定一些css的屬性 } （1）、當瀏覽器視圖寬度為小於等於980像素時，如下規則將會生效。基本上，我會將所有的容器寬度從像素值設置為百分比以使得容器大小自適應。
#pagwraper { width: 94%；}重新設定容器寬度為94%; #content { width: 65%; padding: 3% 4%；}重新設定內容寬度為65%; #sidebar { width: 30%；}重新設定側邊欄寬度為30% 注意這裏我們用到了%，使得頁面是一個流體佈局。（2）、當瀏覽器視圖寬度為小於等於700像素時，視圖指定#content和#sidebar的寬度為自適應並且清除浮動，使得這些容器按全寬度顯示。
#content { width: auto;float: none;margin: 20px 0;} #sidebar { display:none; width: 100%; margin: 0; float: none； } 容器寬度繼承了上面94%的寬度，這個時候我們設定內容寬度為自動，使其填滿外部的wraper容器。並清除其浮動樣式。
這個時候的瀏覽的頁面，可以權衡下右邊側欄的重要程度，如果覺得有必要繼續在頁面中顯示，我們可以清除其浮動，並把寬度也設為100%，這樣就在content這個容器下顯示。但馬海祥覺的一般情況下，在這麼小的瀏覽窗口中，用户只想看到最主要的內容，右邊側欄成為了一個補助模塊，那麼可以直接把它隱藏掉。
這樣可以減少頁面的高度。（3）、當瀏覽器窗口小於等於480px的時候，一般這個就是iPhone的橫向寬度。
就要將#header元素的高度設置為自適應，將h1的字體大小修改為24像素並隱藏側邊欄。首先我們設計webkit內核瀏覽器下禁用文字大小調整，代碼如下：html { -webkit-text-size-adjust: none； } 其次就是代碼的轉換了，如下圖所示：其實在480px寬度下的時候，整體框架佈局已經不用設置，馬海祥認為我們應該考慮得更多的是怎麼把一個良好的頁面佈局展示給用户。
而在這個模式下，如果導航條有很多選項的時候，就會相互堆疊換行，那麼這裏我們設計成點擊出下拉菜單形式，如下圖所示：這裏我們首先考慮在小設備窗口下header太高已經佔據了大半的屏幕顯示，所以這裏我們重新設定下header的高度，能完整呈現出這個站點logo就可以了。在480px小設備窗口下瀏覽，頁面內容會很長，這個時候我們要在底部加個返回頁面頂部的按鈕。
7.請問各位高手,我在寫一個html的時候,想用響應式的css @media,media是規定媒介類型的，默認是screen，此外還有
print， 輸出到打印機；
projection，提交到投影機；
aural，揚聲器；
braille，提交到凸字觸覺感知設備；
tty，電傳打字機 （使用固定的字體）；
tv，電視機；
all，所有輸出設備
--
以上是傳統的説明，實際上除了規定這些之外，你還可以用@media來設定不同分辨率下的不同樣式形式。
比如，你設定了頁面的max-width（最大寬度）為960px
在傳統的用法中，不管它在什麼樣的分辨率下，都會這樣表達。
但是你現在完全可以用media來規定，當瀏覽寬度大於1000px的時候，max-width為960px
而在手機，比如IP4s上，可以讓其max-width為480px之類的。
