什麼是Responsive Web Design(自適應網頁設計)?

網站建設公司 閱讀:516 2018-06-16 16:41:35 評論:0

時代在進步,不斷湧現的各種新型設備(手機/平板電腦)、平臺和流覽器都需要你的網站的網頁能夠相容顯示。自適應網頁設計代表了一種必然的設計趨勢今後十年所有的網站都將採用自適應網頁設計。

隨著移動網路及設備的普及,越來越多的人使用手機或平板電腦上網。網頁設計也需要跟上時代發展的腳步,今天香港網頁設計公司小編,就為大家講解一下什麼是Responsive Web Design(自適應網頁設計)?



移動設備正超過桌面設備,成為訪問互聯網的最常見終端。於是,網頁設計師不得不面對一個難題:如何才能在不同大小的設備上呈現同樣的網頁?


手機的螢幕比較小,寬度通常在600像素以下;PC的螢幕寬度,一般都在1000像素以上(目前主流寬度是1366×768),有的還達到了2000像素。同樣的內容,要在大小迥異的螢幕上,都呈現出滿意的效果,並不是一件容易的事。


很多網站的解決方法,是為不同的設備提供不同的網頁,比如專門提供一個mobile版本,或者iPhone /  iPad版本。這樣做固然保證了效果,但是比較麻煩,同時要維護好幾個版本,而且如果一個網站有多個portal(入口),會大大增加架構設計的複雜度。


於是,很早就有人設想,能不能"一次設計,普遍適用",讓同一張網頁自動適應不同大小的螢幕,根據螢幕寬度,自動調整佈局(layout)?


2010年,Ethan Marcotte提出了"自適應網頁設計"(Responsive Web  Design)這個名詞,指可以自動識別螢幕寬度、並做出相應調整的網頁設計。


他製作了一個範例,裏面是《福爾摩斯歷險記》六個主人公的頭像。如果螢幕寬度大於1300像素,則6張圖片並排在一行。



如果螢幕寬度在600像素到1300像素之間,則6張圖片分成兩行。



如果螢幕寬度在400像素到600像素之間,則導航欄移到網頁頭部。



如果螢幕寬度在400像素以下,則6張圖片分成三行。



自適應網頁設計的特點:


1、自主適應流覽環境的變化,一種設計相容所有尺寸的螢幕;


2、流式頁面佈局,大螢幕、中螢幕使用固定寬度佈局。小螢幕使用流式頁面佈局;


3、多種佈局方式組合應用。

聲明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

發表評論
搜索