国产综合精品-久久久久久成人毛片免费看-69久久夜色精品国产69-美国十次啦怡红院

Web前端知識(shí)

首頁(yè) > 免費(fèi) > Web前端知識(shí) >

響應(yīng)式網(wǎng)站設(shè)計(jì)的原則及經(jīng)驗(yàn)

來(lái)源:北京匯仁智杰科技有限公司   時(shí)間:2016-06-17   點(diǎn)擊:

  在QA TechWeek2014 期間,QA公司首席技術(shù)專家David Walker在 使用Foundation進(jìn)行響應(yīng)式設(shè)計(jì)的會(huì)議上,提出了響應(yīng)式網(wǎng)站設(shè)計(jì)的原則。Walker提到從現(xiàn)有桌面網(wǎng)站創(chuàng)建移動(dòng)應(yīng)用網(wǎng)站的多種方式:原生應(yīng)用,為每種移動(dòng)操作系統(tǒng)開(kāi)發(fā)一個(gè)應(yīng)用;嵌入式HTML5,使用PhoneGap或者類似的工具;在服務(wù)端過(guò)濾,分別為桌面和移動(dòng)設(shè)備建立網(wǎng)站,在兩者間進(jìn)行重定向。
  分析完每種方法的優(yōu)缺點(diǎn)后,Walker提出了響應(yīng)式設(shè)計(jì)(RWD),使用HTM L5、JavaScript和CSS創(chuàng)建響應(yīng)式網(wǎng)站,根據(jù)設(shè)備即時(shí)調(diào)整布局、格式和內(nèi)容。RWD的主要好處是避免內(nèi)容剃重復(fù),使網(wǎng)站能夠適應(yīng)所有設(shè)備,包括未來(lái)設(shè)備的尺寸。缺點(diǎn)是需要優(yōu)秀的CSS和JavaScript技能,有些資源在移動(dòng)網(wǎng)絡(luò)中太大,針對(duì)舊版本的瀏覽器需要Polyfill。
  要做到響應(yīng)式設(shè)計(jì),Walker建議遵循以下原則:
  建立流動(dòng)布局(Fluid layout) 。所有容器的寬度必須定義成瀏覽器Viewport的百分比。
  使用CSS3 Media Query。針對(duì)不同的媒體類型如屏幕、打印機(jī)、電視等等,以及不同的媒體參數(shù),如寬度、高度、顏色、分辨率等等,使用不同的樣式。
  使用自適應(yīng)圖片(Fluid image) 。圖片尺寸可以自適應(yīng),不超過(guò)最大顯示寬度。
  要決定樣式適用于哪種媒體類型,你需要確定有哪些不同的顯示寬度。
  Walker表示,響應(yīng)式網(wǎng)站設(shè)計(jì)還需要考慮:
  為不同的設(shè)備和網(wǎng)絡(luò)速度優(yōu)化圖片; 
  為移動(dòng)UI/UX改變導(dǎo)航模式;
  改變鏈接和按鈕的樣式,使其適于觸摸;
  動(dòng)態(tài)調(diào)整字體大小,以適應(yīng)不同的屏幕分辨率;
  按需加載內(nèi)容,而不是隱藏起來(lái);
  提供圖形的Retina版本。
  Walker還演示了如何使用Foundation創(chuàng)建響應(yīng)式網(wǎng)站,F(xiàn)oundation是一個(gè)開(kāi)源的響應(yīng)式前端框架。另一個(gè)類似的解決方案是Bootstrap,它最初由Twitter開(kāi)發(fā)。

網(wǎng)絡(luò)營(yíng)銷推廣?。”本﹨R仁智杰科技有限公司!

地址:北京市昌平區(qū)回龍觀龍冠大廈5層
咨詢:15201492965
業(yè)務(wù)QQ:373002979
E - mail:sales @ huirenzhijie.com
企業(yè)網(wǎng)站備案:京ICP備15021091號(hào)-1

匯仁智杰與眾不同

  • 有網(wǎng)絡(luò)推廣經(jīng)驗(yàn)
  • 有網(wǎng)站建站隊(duì)伍
  • 有大型網(wǎng)站建設(shè)經(jīng)驗(yàn)
  • 致力于營(yíng)銷型網(wǎng)站建設(shè)
  • 始終堅(jiān)持技術(shù)和服務(wù)同樣重要
查看PC版網(wǎng)站
備案號(hào):京ICP備15021091號(hào)-1 版權(quán)所有:匯仁智杰