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

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

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

• 建立流動布局（Fluid layout）。所有容器的寬度必須定義成瀏覽器Viewport的百分比。

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

• 使用自適應圖片（Fluid image）。圖片尺寸可以自適應，不超過大顯示寬度。

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

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

• 為不同的設備和網絡速度優(yōu)化圖片；

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

• 改變鏈接和按鈕的樣式，使其適于觸摸；

• 動態(tài)調整字體大小，以適應不同的屏幕分辨率；

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

• 提供圖形的Retina版本。

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

網頁名稱：要決定樣式適用于哪種媒體類型，你需要確定有哪些不同的顯示寬度。
標題來源：http://m.rwnh.cn/news/47013.html

成都網站建設公司_創(chuàng)新互聯，為您提供營銷型網站建設、靜態(tài)網站、網站策劃、小程序開發(fā)、微信公眾號、網站排名

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯