自適應網頁設計和響應式網頁設計的區別

香港網站建設 閱讀:128 2018-10-24 21:11:37 評論:0

最近和多位業內的朋友聊起了自適應網頁設計和響應式網頁設計的區別,很多人都對這兩個概念有所混淆,今天香港MW網頁設計公司的小編就和大家一起把這兩種網頁設計類型梳理一下吧。


自適應網頁設計和響應式網頁設計的區別


其實自適應網頁設計和響應式網頁設計,歸根到底都是從網站建設實際出發,為了解決網頁在不同尺寸和分辨率的終端設備無法正常顯示的問題而發展來的,想明白這個事就好理解了。

1、自適應網頁設計和響應式網頁設計的由來

因為早期PC顯示器的分辨率種類不多,所以網站都習慣性會被設計成固定寬度的頁面,例如900px,1080px,1200px。後來隨著顯示器尺寸越來越豐富,特別是筆記本電腦的普及,這種方式的頁面出現了問題。在大屏顯示器上整個頁面顯的特別小,在小屏顯示器上網頁又出現滾動條導致用戶體驗極其的差。為了解決在各種不同大小和分辨率的設備上如何正確顯示網站的問題,前前後後也出現了好多種方案。總結來說就是下面三種:

提供不同版本:為不同的終端設備提供不同版本的網頁。PC、Mobile、Pad提供三個不同的版本(其實就是三個相對獨立的網站,雖然後期實現了一庫多站)。但這樣做雖然保證了展示效果,也造成了維護好幾個版本的麻煩,而且網站有多個入口,會大大增加系統架構的復雜度。

自適應:後來人們就開始想能不能"一次設計,普遍適用",即讓同一個頁面自動適應不同大小的設備,從而解決為不同設備提供不同版本的頁面問題。這就是所謂自適應布局解決方案的開發思路。

響應式:采用自適應布局的話,如果設備太小,就算網頁能夠根據屏幕大小進行適配,但是在太小屏幕顯示內容過多會看不清楚。為了解決這個問題而衍生出來的一種新的布局方式,那就是響應式布局。

2、響應式網站和自適應網站的區別

下面有兩個網址,妳用瀏覽器隨意的調節窗口的尺寸就可以很直觀的感受到兩種展示效果的差異:

自適應網站(網頁內容和布局完全一樣):http://m.ctrip.com/html5/

響應式布局(網頁內容和布局隨著屏幕尺寸變化而變化):https://www.microsoft.com/zh-cn/

從http://m.ctrip.com/html5/這個網頁以看出采用自適應布局的話,不管設備屏幕尺寸如何變化,打開同一個頁面看到的內容和布局基本上是一樣的,不同的只是內容的尺寸。

這個網站https://www.microsoft.com/zh-cn/ 妳可以看到它是可以自動識別屏幕尺寸並做出相應調整的網頁設計,頁面布局和展示的內容可能會隨著屏幕尺寸變化而有所變化。

網絡上也有網友用這麽一張圖來總結響應式和自適應的區別:


自適應網頁設計和響應式網頁設計的區別


如上圖所示,對於同一個頁面(圖中的Html),如果用響應式布局來處理的話,用不同設備(電腦、平板、手機)去訪問此頁面,最後看到的布局和內容有很大不同。

而如果用自適應布局去處理的話,那不管訪問設備如何的不同(上圖是三臺尺寸不一樣的手機),最後看到的頁面內容和布局基本上還是一樣的,就是尺寸略有不同。

其實響應式和自適應兩種布局方式從外觀上很難分辨,但從技術角度來說他們運行的機理不同。所以最後從技術角度再來總結一下兩者的區別:

自適應是用戶請求訪問時會夾帶設備信息,服務器據此做出判斷並調適應對應設備樣式文件+HTML內容+JS,返回給瀏覽器以這種方式響應不同設備。

響應式布局不管使用什麽設備都是在服務器把數據推送到瀏覽器後,腳本或CSS自行檢測設備屏幕大小後執行對應的樣式表內容,並且一直通過本地腳本在監聽屏幕大小的變化,隨時做出樣式響應的變化,這是主動的。

MW Creative Ltd.是香港知名網頁設計公司,為您提供響應式網頁設計,網站優化推廣等一站式服務,我們會根據您的需求,量身打造您的專屬行銷型網站!上面介紹的網頁設計步驟我們全程有專人進行悉心指導,所有環節均有完善的質量管理制度控制,充分保障您的網頁設計質量。在香港找網頁設計公司,就選MW網頁設計。

聲明

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

發表評論
搜索