東莞天嬌設計公司專研好作品,品牌設計整合服務20年
服務熱線:400-830-5200
banner
廣告公司信息

響應式網站設計原則

瀏覽:  時間:2014.06.14  來源:東莞天嬌廣告設計

原標題:響應式網站設計原則

原文  http://www.infoq.com/cn/news/2014/06/responsive-website-design
在 QA TechWeek 2014 期間,QA公司首席技術專家David Walker在 使用Foundation進行響應式設計 的會議上,提出了響應式網站設計的原則。Walker提到從現有桌面網站創建移動應用網站的多種方式:原生應用,為每種移動操作系統開發一個應用;嵌入式HTML 5,使用PhoneGap或者類似的工具;在服務端過濾,分別為桌面和移動設備建立網站,在兩者間進行重定向。

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

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

建立流動布局(Fluid layout) 。所有容器的寬度必須定義成瀏覽器Viewport的百分比。
使用 CSS3 Media Query 。針對不同的媒體類型如屏幕、打印機、電視等等,以及不同的媒體參數,如寬度、高度、顏色、分辨率等等,使用不同的樣式。
使用自適應圖片(Fluid image) 。圖片尺寸可以自適應,不超過最大顯示寬度。
要決定樣式適用于哪種媒體類型,你需要確定有哪些不同的顯示寬度。例如, www.048270.live使用了Media Query相關的40多種樣式??梢酝ㄟ^Chrome擴展 Responsive Inspector 查看。通過這些樣式,time.com的內容將在瀏覽器層面自動布局,因此即使在不同寬度的設備上顯示,頁面也不需要水平滾動。

Walker表示,響應式網站設計還需要考慮:

為不同的設備和網絡速度優化圖片;
為移動UI/UX改變導航模式;
改變鏈接和按鈕的樣式,使其適于觸摸;
動態調整字體大小,以適應不同的屏幕分辨率;
按需加載內容,而不是隱藏起來;
提供圖形的Retina版本。
Walker還演示了如何使用 Foundation 創建響應式網站,Foundation是一個開源的響應式前端框架。另一個類似的解決方案是 Bootstrap ,它最初由Twitter開發。

來源聲明:本文章系天嬌廣告編輯原創或采編整理,如需轉載請注明來自天嬌廣告。以上內容部分(包含圖片、文字)來源于網絡,如有侵權,請及時與本站聯系(0769-22504406)。
熱門標簽:
客戶案例
相關案例介紹
聯系我們
聯系我們
地址:東莞市莞城區地王商務中心2103
電話:0769-22504406
業務咨詢:18944707030 (李生)

市場四部   市場四部

客服一部   天嬌客服一部

客服二部   天嬌客服二部

客服三部   天嬌客服三部

立即預約 專屬顧問為您服務

總監一對一免費咨詢與評估
點擊咨詢總監
畫冊設計行業分類
東莞畫冊設計|海報設計|東莞畫冊印刷|東莞標志設計|菜譜設計|包裝設計|廣告攝影|簽約客戶|網站建設|行業資訊|聯系我們
業務咨詢請致電:400-830-5200 / 189 4470 7030 / 0769-22504406 其他聯系方式請到:聯系天嬌
本網站內所有圖文內容,均歸天嬌廣告公司版權所有。未經許可,謝絕一切轉載。粵ICP備13050043號   | html地圖 | xml地圖       
河南麻将的打法技巧 宁夏11选五遗漏数据查询 浙江20选5历史开奖1000期 大富豪手机捕鱼棋牌 股票*平台 20选8前三直 上海明星麻将娱乐 北京pk10注册 篮球过人技巧 22选5开奖查询 网上真棋牌网
總監微信

總監微信咨詢 李先生