Loading AI tools
来自维基百科，自由的百科全书
回應式網頁設計（英語：Responsive Web Design，通常縮寫為RWD），或稱自適應網頁設計、響應式網頁設計、對應式網頁設計。 是一種網頁設計的技術，這種設計可使網站在不同的裝置（從桌面電腦顯示器到行動電話或其他行動裝置）上瀏覽時對應不同解析度皆有適合的呈現，減少使用者進行縮放、平移和捲動等操作。[1][2][3]
 |
對於網站設計師和前端工程師來說，有別於過去需要針對各種裝置進行不同的設計，使用此種設計方式將更易於維護網頁。
此概念於2010年5月由美國網頁設計師Ethan Marcotte所提出。[4]
採用 RWD 的網站[1][5]使用CSS3 中的 Media queries，[3][6][7]是針對 @media 查詢的延伸應用[8]，藉由流體格線[9]和回應式的圖片[10][11][12][13]針對不同大小的裝置提供對應的樣式：
回應式網頁設計變得更加重要，是因為行動裝置流量現在占網際網路流量的一半以上[14]。因此，Google 宣布行動裝置時代的到來（Mobilegeddon）（2015年4月21日），如果搜尋行為是來自行動裝置，將會提高對行動裝置友善的網站排名。[15]。
「行動裝置優先」和「非侵入式JavaScript」/「漸進增強」（規劃新網站設計時的策略）是優先於 RWD 的概念：傳統的手機瀏覽器不理解 JavaScript 或者 media queries，因此最初的建議做法是建立一個只有基本框架的網站，接著根據智慧型手機和電腦分別提供增強功能；而不是試著「優雅降級」——使一個複雜的網站在最傳統行動電話上喪失某些功能。[16][17][18][19]
在一個網站必須支援缺乏 JavaScript 的基本的行動裝置的情況下，瀏覽器 (使用者代理) 探測 (也叫做「瀏覽器嗅探」)，和行動裝置探測[17][20]是推斷某些 HTML 和 CSS 特性是否受支援的兩種方式 (作為漸進增強的基礎)—然而，這些方法不完全可靠。
對於能力更強的行動電話和 PC，可以直接測試瀏覽器對 HTML/CSS 功能的支援 (辨識裝置或者使用者代理字串) 的 JavaScript 框架如 Modernizr, jQuery 和 jQuery Mobile等流行起來。Polyfills可以被用於添加對一些功能的支援—比如，支援 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」實現可以是這種做法的一部分。
RWD 的一個問題是橫幅廣告和影片不是串流的。[29]然而搜尋廣告和 (橫幅) 顯示廣告支援特定的裝置平台目標，和為桌面，智慧型手機和基本的行動裝置提供不同的廣告尺寸格式。可以為不同平台使用不同的著陸頁URL，[30]或者可以用 AJAX 顯示一個頁面上的不同廣告變體。[24][31][20]
Ethan Marcotte 在他在 A List Apart 的文章中發明了術語 Responsive Web Design (RWD)。[1]他在他 2011 年關於這個主題所寫的簡短的書中描述了回應式網頁設計的理論和實踐。[32]回應式設計被 .net 雜誌 列為 2012 年頂級網頁設計趨勢的第二名 (漸進增強是第一名)。他們也列出了 Ethan Marcotte 最喜歡的回應式站點之中的 20 個。[2]
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.
.gif){kind=small}
