在 QA TechWeek 2014 期間，QA公司首席技術專家David Walker在 使用Foundation進行響應式設計 的會議上，提出了響應式網站設計的原則。Walker提到從現有桌面網站創建移動應用網站的多種方式：原生(shēng)應用，爲每種移動操作系統開(kāi)發一(yī)個應用；嵌入式HTML 5，使用PhoneGap或者類似的工(gōng)具；在服務端過濾，分(fēn)别爲桌面和移動設備建立網站，在兩者間進行重定向。

分(fēn)析完每種方法的優缺點後，Walker提出了響應式設計（RWD），使用HTML 5、JavaScript和CSS創建響應式網站，根據設備即時調整布局、格式和内容。RWD的主要好處是避免内容剃重複，使網站能夠适應所有設備，包括未來設備的尺寸。缺點是需要優秀的CSS和JavaScript技能，有些資(zī)源在移動網絡中(zhōng)太大(dà)，針對舊(jiù)版本的浏覽器需要Polyfill。

要做到響應式設計，Walker建議遵循以下(xià)原則：

1. 建立流動布局（Fluid layout） 。所有容器的寬度必須定義成浏覽器Viewport的百分(fēn)比。

2. 使用 CSS3 Media Query 。針對不同的媒體(tǐ)類型如屏幕、打印機、電(diàn)視等等，以及不同的媒體(tǐ)參數，如寬度、高度、顔色、分(fēn)辨率等等，使用不同的樣式。

3. 使用自适應圖片（Fluid image） 。圖片尺寸可以自适應，不超過最大(dà)顯示寬度。

4. 要決定樣式适用于哪種媒體(tǐ)類型，你需要确定有哪些不同的顯示寬度。例如， www.time.com 使用了Media Query相關的40多種樣式。可以通過Chrome擴展 Responsive Inspector 查看。通過這些樣式，time.com的内容将在浏覽器層面自動布局，因此即使在不同寬度的設備上顯示，頁面也不需要水平滾動。

Walker表示，響應式網站設計還需要考慮：

1. 爲不同的設備和網絡速度優化圖片；

2. 爲移動UI/UX改變導航模式；

3. 改變鏈接和按鈕的樣式，使其适于觸摸；

4. 動态調整字體(tǐ)大(dà)小(xiǎo)，以适應不同的屏幕分(fēn)辨率；

5. 按需加載内容，而不是隐藏起來；

6. 提供圖形的Retina版本。

Walker還演示了如何使用 Foundation 創建響應式網站，Foundation是一(yī)個開(kāi)源的響應式前端框架。另一(yī)個類似的解決方案是 Bootstrap ，它最初由Twitter開(kāi)發。