由 admin 發表的全部文章

回應式網頁設計

維基百科,自由的百科全書

「內容就像水」,這是一個說明RWD原則的說法。

層疊樣式表
CSS動畫
IE盒模型缺陷
CSS filter
無表格網頁設計
回應式網頁設計
b:CSS
h:CSS
本模板:

檢視
討論
編輯
響應式網頁設計(英語: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]以適應不同大小的裝置:

串流網格概念要求頁面元素使用相對單位如百分比或字型排印學調整大小,而不是絕對的單位如像素或點。[9]
靈活的圖像也以相對單位調整大小(最大到 100%),以防止它們顯示在包含它們的元素外面。
Media queries允許網頁根據存取站點裝置的特點而使用不同 CSS 樣式規則,最常用的是瀏覽器的寬度。
回應式網頁設計變得更加重要,因為移動流量現在占網際網路流量的一半以上[14]。因此,Google宣布行動裝置時代的到來(Mobilegeddon)(2015年4月21日),並開始提高移動友好的網站的評級,如果搜尋是被從一個行動裝置發起[15]。