回應式網頁設計 | rwd網站設計
「內容就像水」,這是一個說明RWD原則的說法。一個使網頁上的多個元素在桌上型電腦、平板電腦、智慧型手機等不同解析度的裝置上適應的範例。回應式網頁設計(英語:ResponsiveWebDesign,通常縮寫為RWD),或稱自適應網頁設計、響應式網頁設計、對應式網頁設計。是一種網頁設計的技術,這種設計可使網站在不同的裝置(從桌面電腦顯示器到行動電話或其他行動裝置)上瀏覽時對應不同解析度皆有適合的呈現,減少使用者進行縮放、平移和捲動等操作行為。[1][2][3]對於網站設計師和前端工程師來說,有別於過去需要針對各種裝置進行不同的設...
「內容就像水」,這是一個說明RWD原則的說法。 一個使網頁上的多個元素在桌上型電腦、平板電腦、智慧型手機等不同解析度的裝置上適應的範例。回應式網頁設計(英語: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]針對不同大小的裝置提供對應的樣式:
流體格線概念要求頁面元素使用相對單位,如百分比或em調整大小,而不是絕對單位,如像素或點。[9] 回應式圖片應以相對單位調整大小(最大到 100%),防止它們顯示於它們的上層元素外。 Media queries允許頁面根據瀏覽裝置而使用不同 CSS 樣式規則,最常用的是瀏覽器的寬度。回應式網頁設計變得更加重要,是因為行動裝置流量現在占網際網路流量的一半以上[14]。因此,Google 宣布行動裝置時代的到來(Mobilegeddon)(2015年4月21日),如果搜尋行為是來自行動裝置,將會提高對行動裝置友善的網站排名。[15]。
相關概念[編輯] 行動裝置優先,不引人注目的 JavaScript 和漸進增強[編輯]「行動裝置優先」和「非侵入式JavaScript」/「漸進增強」(規劃新網站設計時的策略)是優先於 RWD 的概念:傳統的手機瀏覽器不理解 JavaScript 或者 media queries,因此最初的建議做法是建立一個只有基本框架的網站,接著根據智慧型手機和電腦分別提供增強功能;而不是試著「優雅降級」——使一個複雜的網站在最傳統行動電話上喪失某些功能。[16][17]...