應用背景
隨着各個終端設備的興起，從現有桌面網站創建移動應用網站有多種方式：原生應用，爲每種移動操作系統開發一個應用；嵌入式HTML 5，使用PhoneGap或者類似的工具；在服務端過濾，分別爲桌面和移動設備建立網站，在兩者間進行重定向。但是爲每一種終端建立一套應用的成本，已經越來越大，所以響應式(RWD)的設計應用越來越廣泛。
使用技術
使用HTML 5、JavaScript和CSS創建響應式網站，根據設備即時調整佈局、格式和內容。RWD的主要好處是避免內容的重複，使網站能夠適應所有設備，包括未來設備的尺寸。缺點是需要優秀的CSS和JavaScript技能，有些資源在移動網絡中太大，針對舊版本的瀏覽器需要Polyfill。
遵循原則
建立流動佈局（Fluid layout）。所有容器的寬度必須定義成瀏覽器Viewport的百分比。
使用CSS3 Media Query。針對不同的媒體類型如屏幕、打印機、電視等等，以及不同的媒體參數，如寬度、高度、顏色、分辨率等等，使用不同的樣式。
使用自適應圖片（Fluid p_w_picpath）。圖片尺寸可以自適應，不超過最大顯示寬度。
要決定樣式適用於哪種媒體類型，你需要確定有哪些不同的顯示寬度。例如，www.time.com使用了Media Query相關的40多種樣式。可以通過Chrome擴展Responsive Inspector查看。通過這些樣式，time.com的內容將在瀏覽器層面自動佈局，因此即使在不同寬度的設備上顯示，頁面也不需要水平滾動。
響應式網站設計還需要考慮：
爲不同的設備和網絡速度優化圖片；
爲移動UI/UX改變導航模式；
改變鏈接和按鈕的樣式，使其適於觸摸；
動態調整字體大小，以適應不同的屏幕分辨率；
按需加載內容，而不是隱藏起來；
提供圖形的Retina版本。
可以使用Foundation創建響應式網站，Foundation是一個開源的響應式前端框架。另一個類似的大家接觸的比較多的解決方案是Bootstrap，它最初由Twitter開發。
文章來源：http://mingkr.com/web-response-rule