1. 程式人生 > >談一下響應式網站的設計原則

談一下響應式網站的設計原則

應用背景
隨著各個終端裝置的興起,從現有桌面網站建立移動應用網站有多種方式:原生應用,為每種移動作業系統開發一個應用;嵌入式HTML 5,使用PhoneGap或者類似的工具;在服務端過濾,分別為桌面和移動裝置建立網站,在兩者間進行重定向。但是為每一種終端建立一套應用的成本,已經越來越大,所以響應式(RWD)的設計應用越來越廣泛。
使用技術
使用HTML 5、JavaScript和CSS建立響應式網站,根據裝置即時調整佈局、格式和內容。RWD的主要好處是避免內容的重複,使網站能夠適應所有裝置,包括未來裝置的尺寸。缺點是需要優秀的CSS和JavaScript技能,有些資源在行動網路中太大,針對舊版本的瀏覽器需要Polyfill。
遵循原則


建立流動佈局(Fluid layout)。所有容器的寬度必須定義成瀏覽器Viewport的百分比。
使用CSS3 Media Query。針對不同的媒體型別如螢幕、印表機、電視等等,以及不同的媒體引數,如寬度、高度、顏色、解析度等等,使用不同的樣式。
使用自適應圖片(Fluid image)。圖片尺寸可以自適應,不超過最大顯示寬度。
要決定樣式適用於哪種媒體型別,你需要確定有哪些不同的顯示寬度。例如,www.time.com使用了Media Query相關的40多種樣式。可以通過Chrome擴充套件Responsive Inspector檢視。通過這些樣式,time.com的內容將在瀏覽器層面自動佈局,因此即使在不同寬度的裝置上顯示,頁面也不需要水平滾動。
響應式網站設計還需要考慮:

為不同的裝置和網路速度優化圖片;
為移動UI/UX改變導航模式;
改變連結和按鈕的樣式,使其適於觸控;
動態調整字型大小,以適應不同的螢幕解析度;
按需載入內容,而不是隱藏起來;
提供圖形的Retina版本。
可以使用Foundation建立響應式網站,Foundation是一個開源的響應式前端框架。另一個類似的大家接觸的比較多的解決方案是Bootstrap,它最初由Twitter開發。