響應式網站設計原則

在QA TechWeek 2014期間，QA公司首席技術專家David Walker在使用Foundation進行響應式設計的會議上，提出了響應式網站設計的原則。Walker提到從現有桌面網站建立移動應用網站的多種方式：原生應用，爲每種移動操做系統開發一個應用；嵌入式HTML 5，使用PhoneGap或者相似的工具；在服務端過濾，分別爲桌面和移動設備創建網站，在二者間進行重定向。

分析完每種方法的優缺點後，Walker提出了響應式設計（RWD），使用HTML 五、JavaScript和CSS建立響應式網站，根據設備即時調整佈局、格式和內容。RWD的主要好處是避免內容剃重複，使網站可以適應全部設備，包括將來設備的尺寸。缺點是須要優秀的CSS和JavaScript技能，有些資源在移動網絡中太大，針對舊版本的瀏覽器須要Polyfill。

要作到響應式設計，Walker建議遵循如下原則：

創建流動佈局（Fluid layout）。全部容器的寬度必須定義成瀏覽器Viewport的百分比。

使用CSS3 Media Query。針對不一樣的媒體類型如屏幕、打印機、電視等等，以及不一樣的媒體參數，如寬度、高度、顏色、分辨率等等，使用不一樣的樣式。

使用自適應圖片（Fluid image）。圖片尺寸能夠自適應，不超過最大顯示寬度。

要決定樣式適用於哪一種媒體類型，你須要肯定有哪些不一樣的顯示寬度。經過Chrome擴展Responsive Inspector查看。經過這些樣式，time.com的內容將在瀏覽器層面自動佈局，所以即便在不一樣寬度的設備上顯示，頁面也不須要水平滾動。

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

爲不一樣的設備和網絡速度優化圖片；

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

改變連接和按鈕的樣式，使其適於觸摸；

動態調整字體大小，以適應不一樣的屏幕分辨率；

按需加載內容，而不是隱藏起來；

提供圖形的Retina版本。