在QA TechWeek2014 期間,QA公司首席技術(shù)專家David Walker在 使用Foundation進行響應式設計的會議上,提出了響應式網(wǎng)站設計的原則。Walker提到從現(xiàn)有桌面網(wǎng)站創(chuàng)建移動應用網(wǎng)站的多種方式:原生應用,為每種移動操作系統(tǒng)開發(fā)一個應用;嵌入式HTML5,使用PhoneGap或者類似的工具;在服務端過濾,分別為桌面和移動設備建立網(wǎng)站,在兩者間進行重定向。
分析完每種方法的優(yōu)缺點后,Walker提出了響應式設計(RWD),使用HTM L5、JavaScript和CSS創(chuàng)建響應式網(wǎng)站,根據(jù)設備即時調(diào)整布局、格式和內(nèi)容。RWD的主要好處是避免內(nèi)容剃重復,使網(wǎng)站能夠適應所有設備,包括未來設備的尺寸。缺點是需要優(yōu)秀的CSS和JavaScript技能,有些資源在移動網(wǎng)絡中太大,針對舊版本的瀏覽器需要Polyfill。
要做到響應式設計,Walker建議遵循以下原則:
建立流動布局(Fluid layout) 。所有容器的寬度必須定義成瀏覽器Viewport的百分比。
使用CSS3 Media Query。針對不同的媒體類型如屏幕、打印機、電視等等,以及不同的媒體參數(shù),如寬度、高度、顏色、分辨率等等,使用不同的樣式。
使用自適應圖片(Fluid image) 。圖片尺寸可以自適應,不超過最大顯示寬度。
要決定樣式適用于哪種媒體類型,你需要確定有哪些不同的顯示寬度。
Walker表示,響應式網(wǎng)站設計還需要考慮:
為不同的設備和網(wǎng)絡速度優(yōu)化圖片;
為移動UI/UX改變導航模式;
改變鏈接和按鈕的樣式,使其適于觸摸;
動態(tài)調(diào)整字體大小,以適應不同的屏幕分辨率;
按需加載內(nèi)容,而不是隱藏起來;
提供圖形的Retina版本。
Walker還演示了如何使用Foundation創(chuàng)建響應式網(wǎng)站,F(xiàn)oundation是一個開源的響應式前端框架。另一個類似的解決方案是Bootstrap,它最初由Twitter開發(fā)。
免費學習課堂
推薦文章
響應式網(wǎng)站設計的原則及經(jīng)驗
來源:北京匯仁智杰科技有限公司 時間:2016-06-17 點擊: 次
推薦文章
- 織夢dedecms漏洞修復大全含任意文件2016-09-05
- 整頓微信公眾號過度營銷 對嚴重違2016-01-26
- SEO優(yōu)化過程要避免什么?2016-01-26
- 網(wǎng)站空間被掛馬的原因原因及解決2016-01-26
- 2016企業(yè)該如何運用互聯(lián)網(wǎng)進行營銷2016-01-26
- WEB前端項目開發(fā)中需注意的細節(jié)2016-01-26
- 低價網(wǎng)站建設的危害有哪些?2016-01-15
- 如何詳細的分析你網(wǎng)站的競爭對手2015-06-10
- 網(wǎng)站設計中四個常犯的錯誤2015-01-22
- 如何搭配網(wǎng)站設計中的色彩?2015-01-22