響應式Web設計(Responsive Web design)的理念是：頁面的設計與開發應當根據使用者行為以及裝置環境(系統平臺、螢幕尺寸、螢幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和佈局、圖片、CSS media query的使用等。
本經驗分享筆者多年響應式Web設計的經驗。
工具/原料
桌上型電腦或膝上型電腦
網際網路或移動網際網路
響應式Web設計
方法/步驟
響應式Web設計的第一步就和美工（設計師）確定設計圖的尺寸，這裡以320、720、1080三種尺寸為基準。
響應式Web設計第二步就是開始切圖，使用PS為最佳，FW為次。
響應式Web設計第三步確定斷點，這裡是320-720、720-1080、>1080，將整個螢幕大小分成三個區段，小於320的不予考慮。
以1080的設計稿為基準，新建樣式檔案index1080.css、res320.css、res720.css
使用瀏覽器自帶的測試工具或是專門的線上測試平臺進行測試，確定不同螢幕解析度的適配。
響應式網站一般是移動平臺的響應式網站，全平臺的響應式不多。在移動端，使用HTML5+CSS3可以簡化開發。
響應式設計效能的問題需要注意，最主要的響應式圖片的處理。
現在智慧手機的瀏覽器常常會被重定向到專門的移動站點，這些站點的內容和視覺設計顯然是經過刪減的，並被稱為mdot（因為許多針對手機的站點的網址都使用的是“m.”開頭的子域名，所以才會稱之為mdot）站點。
下載更少的圖片、指令碼和樣式表……這些轉變使得網站能更快載入。原因顯而易見——下載更少的位元組以及發起更少的請求肯定比原來要快，但是響應式網站的設計卻沒有遵從這個模式。
matchMedia()是Javascript內部自帶的方法，你可以將CSS媒介查詢作為引數傳遞給它，它會返回相關媒介查詢是否匹配的資訊。
具體來說，函式會返回一個MediaQueryList物件，該物件具有兩個屬性：matches和media。
matches屬性的值可以是true（如果媒介查詢匹配）或者false（如果媒介查詢不匹配）。
media屬性的值就是你所傳遞的引數，例如：
windows.matchMedia(“(min-width:200px)”) media屬性將會返回”(min-width:200px)”。
支援matchMedia()方法的瀏覽器有：chrome、Safari5.1+、Firefox9、Android3+以及iOS5+。
Paul Irish為那些不支援該方法的瀏覽器建立了一個方便使用的polyfill。
注意事項
響應式設計需要考慮網站的效能問題
響應式Web設計需要慎重選擇斷點