響應式網頁設計（rwd）是一種新的**設計模式，從此構建的**可自動適應不同的訪問裝置（從桌面電腦，平板電腦到只能手機），方便使用者閱讀和導航瀏覽，減少使用者的放大/縮小/滑動操作，從而提供完整而友好的使用者體驗。
（簡寫：響應式布局可以讓網頁同時適配不同解析度和不同手機端，讓客戶有更好的體驗）
l利用對屬性設定白扥比來適配不同螢幕，注意這裡的百分比是相對于父元素的；
能設定的屬性有 width ,heigth,padding,margin ,其他屬性比如border,font-size 不能用百分比設定的，先看乙個簡單例子：
.tabbox
頂部是利用設定 width: 50%來適應不同的解析度，由於原始高度不同，所以第一張頂部會有空白，這種情況最好兩張寬高保持一致，如果使用強制高度統一，會導致變形；
注意：當螢幕大於的寬度時，會進行拉伸；解決拉伸方法就是改為max-width: 50%，但當螢幕大於的寬度時，兩邊會有空白。
欄目是利用設定單欄目 width: 25%來適應不同的解析度。
由於沒辦法對 font-size 進行百分比設定，所以用的最多就是對和大塊布局進行百分比設定。
利用**查詢設定不同解析度下的css 樣式，來適配不同螢幕，先看乙個簡單例子：
利用**查詢設定不同解析度下的css 樣式，來適配不同螢幕，先看乙個簡單例子：
三個不同解析度下顯示對應的背景色。
**查詢相對於百分比布局，可以對布局進行更細緻的調整，但需要在每個解析度下面都寫一套 css 樣式；解析度拆分可視專案具體情況而定。
注意：ie6、7、8 不支援**查詢。
當前頁面中元素的rem 單位的樣式值都是針對於html 元素的font-size 的值進行動態計算的，所以有兩種方法可以達到適配不同螢幕：
第一種利用**查詢，在不同解析度下給 html 的 font-size 賦值。
第二種利用 js 動態計算賦值，詳細**如下圖
缺點就是開啟頁面時候，元素大小會有乙個變化過程。
根據 psd 檔案寬度或高度作為標準，元素單位 px 轉換為 vw 或 vh，比如font-size: 12px，psd 檔案寬度 375，轉換公式 12 * 100 / 375，則樣式改為font-size: 3.2vw，下面是我經常使用的工具，有利於提高轉換效率。
現階段手機端用的最多就是這個方法，能保持不同螢幕下元素顯示效果一致， 也不用寫多套樣式。
利用 flex 屬性來適配不同螢幕，下圖利用簡單的屬性實現欄目響應式
如何實現響應式布局
首先，在網頁 的頭部，加入一行viewport元標籤。所有主流瀏覽器都支援這個設定，包括ie9。對於那些老式瀏覽器 主要是ie6 7 8 需要使用css3 mediaqueries.js。不使用絕對寬度 由於網頁會根據螢幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條...
如何實現響應式布局
響應式與自適應的區別 響應式布局 不管使用者使用的是什麼裝置都是在伺服器把資料推送到瀏覽器後，指令碼或css自行偵測螢幕大小後執行對應的樣式表內容，並且一直通過本地指令碼在監聽螢幕大小的變化，隨時做出樣式響應的變化，所以是主動的。同一頁面在不同大小裝置可能呈現不一樣的頁面效果 px 相對於顯示器螢幕...
實現響應式布局
響應式網頁設計現在無疑是一件大事情。如果你還不了解響應式設計，可以看看我最近發表的 響應式站點列表 譯者注 可以好好看看示例中的 在不同解析度下的展現方式 對新手來說，響應式設計 可能有一點複雜，但是事實上比你想象的簡單。為了幫助你迅速的了解響應式設計，我起草了一篇快速教程。你可以在3個步驟中學習到...