极速快3大小投注技术|最新极速快3开奖结果

響應式網站與自適應網站區別比較

導語   Adaptive website(自適應網站) 應對在瀏覽器的寬度變化不調整網頁元素的位置,縮放網頁元素,以適應在可用空間。  Responsive website (響應式網站) 應對在瀏覽器的寬度變化通過

  Adaptive website(自適應網站)            應對在瀏覽器的寬度變化不調整網頁元素的位置,縮放網頁元素,以適應在可用空間。

  Responsive website (響應式網站)        應對在瀏覽器的寬度變化通過調整網頁元素的位置,以適應在可用空間。

  PS:真不知道為什么很多人都把自適應網站與響應式網站混為一談。(自適應網站!=響應式網站)

  開發難度比較

  自適應網站開發起來比較既復雜(不同屏幕的適配控制)又簡單(獨立于PC端),但是容易維護與調試(只有移動端的處理事件)。

  響應式網站開發起來比較既簡單(只需通過媒體查詢來調整)又復雜(與PC端網頁元素耦合度大),但是不容易調試與維護(綁定了移動端與手機端的處理事件)。

  頁面性能比較

\

  自適應網站只有移動端的布局與樣式(內容少),下載到瀏覽器立刻顯示,所以性能快。

  響應式網站不僅有移動端的布局與樣式,還有PC的布局與樣式(內容多),下載到瀏覽器之后進行網頁布局調整再顯示,所以性能慢。

  PS:響應式網站也有提高性能的方法,就是針對屏幕加載不同的媒體查詢樣式,選擇性加載資源。但是性能依然不如自適應網站。

  用戶體驗比較

  響應式網站保證PC端與移動端的一致性,流式布局。

  自適應網站保證移動端更友好的體驗。

  SEO比較

  自適應網站不容易聚集網站權重,但可以通過重定向進行聚集權重。

  響應式網站容易聚集網站權重,容易把移動端的權重與PC端的權重疊加,提高網站排名。

  PS:這種做法是電腦端與移動端使用單獨的網址。

  總結:推薦開發自適應網站,追求性能與用戶體驗。(大多數的互聯網公司都是web PC端與移動端分離的)

          響應式網站不適合開發一些比較復雜的網站。(涉及一些動畫交互效果,頁面元素過多)

          建議開發一套響應式電腦網站(過渡到平板端,不過渡到手機端)和開發一套響應式手機端網站(過渡到平板端以下的尺寸,不過渡到平板端)
 

  百分比寬度布局

  流式布局

  第一派,寬度使用百分比,文字使用 em,現在也很多開始使用rem了,也就是所謂的高清方案。第二派的布局以 iGoogle 為代表(已經停止)。

  一開始沒有響應式布局這個詞語,但是慢慢出現了一個詞——漸進增強,新詞的出現總是伴隨的舊詞一起出現。就好比 3G 出現之前,沒人管自己的手機叫 2G,所以,3G 和 2G 兩個詞是一起出現的(技術上當然2G技術先出現)。同理,漸進增強出現后,另一個詞「優雅降級」也隨之出現了。

  詞的意思可以自己看 wiki、Google,我只在這兒舉一個例子,gmail 和 qqmail。

  他倆的寬度都是 100%,都是自適應。但是:

  qqmail 就是 css hack 的完美體現,你用任何一個瀏覽器,幾乎可以看到同一個樣子的郵箱,騰訊的前端工程師們用各種 css hack 技術來展示郵箱頁面,為的是統一的用戶體驗。

  而 gmail 使用了漸進增強,你的瀏覽器越強,你看到的效果就越好,用戶體驗就越好。

  再后來,就是大家都熟知的 Google 發布了 android,于是互聯網大戰從 PC 打到了手機。還有 HTML5 標準的發布。

  手機雖然屏幕變小了,但是卻提供了更豐富的功能。還記得以前用諾基亞上 QQ 的事兒嗎?我們訪問的是 3g.qq.com,當時我使用的是中興的手機,訪問 wap.qq.com,在后來的智能手機都是訪問 m.qq.com。

  不禁有人問「真的需要為每個手機分別設計一個網頁嗎?」、「真的需要為手機和電腦設計不同的網頁嗎?」,解決方法當然有很多種,可以看看 css zen garden(《Css秘密花園》還是很不錯的一本書, 相信做過前端的都看過這個網站,一個神奇的網站。

  最終的解決方案勝出者是響應式布局。

  響應式布局被大家熟知的一個重要原因就是 twitter 開源了 bootstrap。Google 第一次完成了從先驅到烈士。

  下面再從直觀一點的來看,響應式和自適應的區別:

  首先兩種方式解決問題的是不一樣的。

  自適應是為了解決如何才能在不同大小的設備上呈現同樣的網頁

\

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

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

  于是,很早就有人設想,能不能"一次設計,普遍適用",讓同一張網頁自動適應不同大小的屏幕,根據屏幕寬度,自動調整網頁內容大小

\

  但是無論怎樣,他們主體的內容和布局是沒有變的。

  響應式的概念應該覆蓋了自適應,而且涵蓋的內容更多。

  自適應還是暴露出一個問題,如果屏幕太小,即使網頁能夠根據屏幕大小進行適配,但是會感覺在小屏幕上查看,內容過于擁擠,響應式正是為了解決這個問題而衍生出來的概念。它可以自動識別屏幕寬度、并做出相應調整的網頁設計,布局和展示的內容可能會有所變動。如果下面的網址,屏幕寬度大于1300像素,則6張圖片并排在一行。

http://www.hlwom.icu/ true 響應式網站與自適應網站區別比較 http://www.hlwom.icu/show-24-1118-1.html report 2790   Adaptive website(自適應網站) 應對在瀏覽器的寬度變化不調整網頁元素的位置,縮放網頁元素,以適應在可用空間。  Responsive website (響應式網站) 應對在瀏覽器的寬度變化通過
本站歡迎任何形式的轉載,但請務必注明出處,尊重他人勞動成果
轉載請注明: 文章轉載自:愛思資源網 http://www.hlwom.icu/show-24-1118-1.html

[前端插件推薦] Plugin

1 2 3 4
  • jQuery實現逐字逐句顯示插件l-by-l.min.js
  • jQuery帶方向感知的鼠標滑過圖片邊框特效插件
  • jQuery HotKeys監聽鍵盤按下事件keydown插件
  • 響應式無限輪播jQuery旋轉木馬插件
響應式無限輪播jQuery旋轉木馬插件
web前端開發
愛思資源網 Copyright 2012-2014 www.hlwom.icu All rights reserved.(晉ICP備13001436號-1)
极速快3大小投注技术 赛车pk10改单骗局 彩6app彩票软件 湖北11选五几点开始 贵州新十一选五走势图 竞彩过关对照表 时时彩退钱方法 天天彩票分分彩开奖结果 内蒙古时时彩走势图彩 今年房地产走势 5019期36选7开奖结果