原標(biāo)題：響應(yīng)式網(wǎng)站設(shè)計原則
原文 http://www.infoq.com/cn/news/2014/06/responsive-website-design
在 QA TechWeek 2014 期間，QA公司首席技術(shù)專家David Walker在 使用Foundation進(jìn)行響應(yīng)式設(shè)計 的會議上，提出了響應(yīng)式網(wǎng)站設(shè)計的原則。Walker提到從現(xiàn)有桌面網(wǎng)站創(chuàng)建移動應(yīng)用網(wǎng)站的多種方式：原生應(yīng)用，為每種移動操作系統(tǒng)開發(fā)一個應(yīng)用；嵌入式HTML 5，使用PhoneGap或者類似的工具；在服務(wù)端過濾，分別為桌面和移動設(shè)備建立網(wǎng)站，在兩者間進(jìn)行重定向。
分析完每種方法的優(yōu)缺點后，Walker提出了響應(yīng)式設(shè)計（RWD），使用HTML 5、JavaScript和CSS創(chuàng)建響應(yīng)式網(wǎng)站，根據(jù)設(shè)備即時調(diào)整布局、格式和內(nèi)容。RWD的主要好處是避免內(nèi)容剃重復(fù)，使網(wǎng)站能夠適應(yīng)所有設(shè)備，包括未來設(shè)備的尺寸。缺點是需要優(yōu)秀的CSS和JavaScript技能，有些資源在移動網(wǎng)絡(luò)中太大，針對舊版本的瀏覽器需要Polyfill。
要做到響應(yīng)式設(shè)計，Walker建議遵循以下原則：
建立流動布局（Fluid layout） 。所有容器的寬度必須定義成瀏覽器Viewport的百分比。
使用 CSS3 Media Query 。針對不同的媒體類型如屏幕、打印機(jī)、電視等等，以及不同的媒體參數(shù)，如寬度、高度、顏色、分辨率等等，使用不同的樣式。
使用自適應(yīng)圖片（Fluid image） 。圖片尺寸可以自適應(yīng)，不超過最大顯示寬度。
要決定樣式適用于哪種媒體類型，你需要確定有哪些不同的顯示寬度。例如， e-taxi.cn使用了Media Query相關(guān)的40多種樣式?？梢酝ㄟ^Chrome擴(kuò)展 Responsive Inspector 查看。通過這些樣式，time.com的內(nèi)容將在瀏覽器層面自動布局，因此即使在不同寬度的設(shè)備上顯示，頁面也不需要水平滾動。
Walker表示，響應(yīng)式網(wǎng)站設(shè)計還需要考慮：
為不同的設(shè)備和網(wǎng)絡(luò)速度優(yōu)化圖片；
為移動UI/UX改變導(dǎo)航模式；
改變鏈接和按鈕的樣式，使其適于觸摸；
動態(tài)調(diào)整字體大小，以適應(yīng)不同的屏幕分辨率；
按需加載內(nèi)容，而不是隱藏起來；
提供圖形的Retina版本。
Walker還演示了如何使用 Foundation 創(chuàng)建響應(yīng)式網(wǎng)站，F(xiàn)oundation是一個開源的響應(yīng)式前端框架。另一個類似的解決方案是 Bootstrap ，它最初由Twitter開發(fā)。
市場四部
