跳至內容

響應式網頁設計

本頁使用了標題或全文手工轉換
維基百科，自由的百科全書
「內容如水，形隨器變」，這是一個說明RWD原則的說法。
一個使網頁上的多個元素在桌上電腦、平板電腦、智能電話等不同解像度的裝置上適應的範例。
層疊樣式表
本模板：

回應式網頁設計（英語：Responsive Web Design，通常縮寫為RWD），或稱自適應網頁設計、響應式網頁設計、對應式網頁設計。 是一種網頁設計的技術，這種設計可使網站在不同的裝置（從桌面電腦顯示器到流動電話或其他流動裝置）上瀏覽時對應不同解像度皆有適合的呈現，減少用戶進行縮放、平移和捲動等操作。[1][2][3]

對於網站設計師和前端工程師來說，有別於過去需要針對各種裝置進行不同的設計，使用此種設計方式將更易於維護網頁。

此概念於2010年5月由美國網頁設計師Ethan Marcotte所提出。[4]

採用 RWD 的網站[1][5]使用CSS3 中的 Media queries（英語：Media queries），[3][6][7]是針對 @media 查詢的延伸應用[8]，藉由流體格線[9]和回應式的圖片[10][11][12][13]針對不同大小的裝置提供對應的樣式：

  • 流體格線概念要求頁面元素使用相對單位，如百分比或em調整大小，而不是絕對單位，如像素或點。[9]
  • 回應式圖片應以相對單位調整大小（最大到 100%），防止它們顯示於它們的上層元素外。
  • Media queries（英語：Media queries）允許頁面根據瀏覽裝置而使用不同 CSS 樣式規則，最常用的是瀏覽器的寬度。

回應式網頁設計變得更加重要，是因為流動裝置流量現在佔網際網絡流量的一半以上[14]。因此，Google 宣佈流動裝置時代的到來（Mobilegeddon）（2015年4月21日），如果搜尋行為是來自流動裝置，將會提高對流動裝置友善的網站排名。[15]。

相關概念

[編輯]

流動裝置優先，不引人注目的 JavaScript 和漸進增強

[編輯]

「流動裝置優先」和「非侵入式JavaScript」/「漸進增強」（規劃新網站設計時的策略）是優先於 RWD 的概念：傳統的手機瀏覽器無法理解 JavaScript 或者 media queries，因此最初的建議做法是建立一個只有基本框架的網站，接着根據智能電話和電腦分別提供增強功能；而不是試着「優雅降級」——使一個複雜的網站在傳統手機上喪失某些功能。[16][17][18][19]

基於瀏覽器，特性或裝置探測的漸進增強

[編輯]

在一個網站必須支援缺乏 JavaScript 的基本的流動裝置的情況下，瀏覽器 (用戶代理) 探測 (也叫做「瀏覽器嗅探（英語：Browser-sniffing）」)，和流動裝置探測（英語：Mobile device detection）[17][20]是推斷某些 HTML 和 CSS 特性是否受支援的兩種方式 (作為漸進增強的基礎)—然而，這些方法不完全可靠。

對於能力更強的現代手機PC，可以直接測試瀏覽器對 HTML/CSS 功能的支援 (辨識裝置或者用戶代理字串) 的 JavaScript 框架如 Modernizr, jQuery 和 jQuery Mobile（英語：JQuery Mobile）等流行起來。Polyfills（英語：Polyfill）可以被用於添加對一些功能的支援—比如，支援 media queries (RWD 所需要的)，和在 (舊版本) Internet Explorer 上提高 HTML 5 支援。功能檢測在較舊的瀏覽器上可能並不可靠：某些瀏覽器可能報告某個特性可用，但實際上要麼缺失，要麼因實現不完善而無法正常工作。[21][22]

挑戰和其它辦法

[編輯]

Luke Wroblewski 總結出了 RWD 和移動設計中的一些挑戰，還建立了一個多裝置佈局模式的目錄。[23][24][25]他提議，比起單純的 RWD 手段，Device Experience 或者 RESS (通過伺服器端組件的響應式網頁設計, Responsive Web Design with Server Side Components) 等方法可以提供對流動裝置更加最佳化的用戶體驗。[26][27][28]樣式表語言如Sass的伺服器端「動態 CSS（英語：Dynamic Cascading Style Sheets）」實現可以是這種做法的一部分。

RWD 的一個問題是橫幅廣告和影片不是串流的。[29]然而搜尋廣告（英語：Search advertising）和 (橫幅) 顯示廣告支援特定的裝置平台目標，和為桌面，智能電話和基本的流動裝置提供不同的廣告尺寸格式。可以為不同平台使用不同的着陸頁（英語：Landing page）URL，[30]或者可以用 AJAX 顯示一個頁面上的不同廣告變體。[24][31][20]

歷史

[編輯]

Ethan Marcotte 在他在 A List Apart（英語：A List Apart） 的文章中發明了術語 Responsive Web Design (RWD)。[1]他在他 2011 年關於這個主題所寫的簡短的書中描述了響應式網頁設計的理論和實踐。[32]響應式設計被 .net 雜誌（英語：.net (magazine)） 列為 2012 年頂級網頁設計趨勢的第二名 (漸進增強是第一名)。他們也列出了 Ethan Marcotte 最喜歡的響應式站點之中的 20 個。[2]

參考文獻

[編輯]
  1. ^ 1.0 1.1 1.2 Marcotte, Ethan. Responsive Web Design. A List Apart. May 25, 2010 [2012-12-05]. （原始內容存檔於2013-05-24）. 
  2. ^ 2.0 2.1 Ethan Marcotte's 20 favourite responsive sites. .net magazine. October 11, 2011 [2012-12-07]. （原始內容存檔於2013-09-17）. 
  3. ^ 3.0 3.1 Gillenwater, Zoe Mickley. Examples of flexible layouts with CSS3 media queries. Stunning CSS3: 320. Dec 15, 2010 [2012-12-05]. ISBN 978-0-321-722133. （原始內容存檔於2020-08-20）. 
  4. ^ 回應式網頁設計的概念. 慈濟醫療志業數碼學習電子報. [2017-02-10]. （原始內容存檔於2021-06-24）. 
  5. ^ Pettit, Zoe Nick. Beginner’s Guide to Responsive Web Design. TeamTreehouse.com blog. Aug 8, 2012 [2012-12-05]. （原始內容存檔於2012-08-24）. 
  6. ^ Gillenwater, Zoe Mickley. Crafting quality media queries. Oct 21, 2011 [2012-12-05]. （原始內容存檔於2020-11-12）. 
  7. ^ Responsive design—harnessing the power of media queries. Google Webmaster Central. Apr 30, 2012 [2012-12-05]. （原始內容存檔於2016-03-05）. 
  8. ^ W3C @media rule （頁面存檔備份，存於互聯網檔案館）
  9. ^ 9.0 9.1 Marcotte, Ethan. Fluid Grids. A List Apart. March 3, 2009 [2012-12-05]. （原始內容存檔於2013-01-25）. 
  10. ^ Marcotte, Ethan. Fluid images. A List Apart. June 7, 2011 [2012-12-05]. （原始內容存檔於2013-01-23）. 
  11. ^ Adaptive Images. [2012-12-05]. （原始內容存檔於2020-12-03）. 
  12. ^ Hannemann, Anselm. The road to responsive images. net Magazine. 2012-09-07 [2012-12-05]. （原始內容存檔於2013-09-01）. 
  13. ^ Jacobs, Denise. 21 top tools for responsive web design. .net Magazine. August 23, 2011 [2012-12-05]. （原始內容存檔於2012-04-21）. 
  14. ^ Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper. Cisco. January 30, 2015 [August 4, 2015]. （原始內容存檔於2016-02-02）. 
  15. ^ Official Google Webmaster Central Blog: Rolling out the mobile-friendly update. Official Google Webmaster Central Blog. [August 4, 2015]. （原始內容存檔於2016-03-08）. 
  16. ^ Wroblewski, Luke. Mobile First. November 3, 2009 [2012-12-05]. （原始內容存檔於2021-01-05）. 
  17. ^ 17.0 17.1 Firtman, Maximiliano. Programming the Mobile Web. July 30, 2010: 512 [2012-12-05]. ISBN 978-0-596-80778-8. （原始內容存檔於2020-08-05）. 
  18. ^ Graceful degradation versus progressive enhancement. February 3, 2009. （原始內容存檔於2012年12月20日）. 
  19. ^ Designing with Progressive Enhancement. March 1, 2010: 456 [2012-12-05]. ISBN 978-0-321-65888-3. （原始內容存檔於2020-07-31）. 
  20. ^ 20.0 20.1 Server-Side Device Detection: History, Benefits And How-To. Smashing magazine. September 24, 2012 [2012-12-07]. （原始內容存檔於2014-03-29）. 
  21. ^ BlackBerry Torch: The HTML5 Developer Scorecard | Blog. Sencha. 2010-08-18 [2012-09-11]. （原始內容存檔於2014-03-05）. 
  22. ^ Motorola Xoom: The HTML5 Developer Scorecard | Blog. Sencha. 2011-02-24 [2012-09-11]. （原始內容存檔於2015-02-13）. 
  23. ^ Wroblewski, Luke. Mobilism: jQuery Mobile. May 17, 2011 [2012-12-07]. （原始內容存檔於2020-11-27）. 
  24. ^ 24.0 24.1 Wroblewski, Luke. Rolling Up Our Responsive Sleeves. February 6, 2012 [2012-12-07]. （原始內容存檔於2020-11-25）. 
  25. ^ Wroblewski, Luke. Multi-Device Layout Patterns. March 14, 2012 [2012-12-07]. （原始內容存檔於2020-12-30）. 
  26. ^ Wroblewski, Luke. Responsive Design ... or RESS. February 29, 2012 [2012-12-07]. （原始內容存檔於2020-11-11）. 
  27. ^ Wroblewski, Luke. RESS: Responsive Design + Server Side Components. September 12, 2011 [2012-12-07]. （原始內容存檔於2020-10-24）. 
  28. ^ Andersen, Anders. Getting Started with RESS. May 9, 2012 [2012-12-07]. （原始內容存檔於2013-09-04）. 
  29. ^ Snyder, Matthew; Koren, Etai. The state of responsive advertising: the publishers' perspective. .net Magazine. Apr 30, 2012 [2012-12-07]. （原始內容存檔於2013-08-31）. 
  30. ^ Google AdWords Targeting (Device Platform Targeting). [2012-12-07]. （原始內容存檔於2012-12-20）. 
  31. ^ JavaScript and Responsive Web Design （頁面存檔備份，存於互聯網檔案館） Google Developers
  32. ^ Marcotte, Ethan. Responsive Web Design. 2011: 143 [2012-12-07]. ISBN 978-0-9844425-7-7. （原始內容存檔於2021-01-04）. 

Atop Technologies （頁面存檔備份，存於互聯網檔案館）

外部連結

[編輯]

參見

[編輯]
取自 "https://zh.wikipedia.org/w/index.php?title=响应式网页设计&oldid=85356725"