響應式網頁設計(Responsive Web Design)

響應式網頁設計(或“RWD”)是一種網頁設計,為不同的瀏覽器平台提供定制的觀看體驗。使用RWD創建的網站將根據用於訪問網站的設備顯示不同的界面。
例如,響應式網站可能在筆記本電腦上出現一種方式,另一種方式出現在平板電腦上,另一種方式出現在智能手機上。

如今,許多人通過移動設備訪問網站,而不是台式計算機或筆記本電腦。雖然大多數智能手機都可以顯示常規網站,但內容難以閱讀,甚至難以瀏覽。因此,許多Web開發人員現在使用響應式Web設計在小屏幕上提供更好的Web瀏覽體驗。

專為移動設備(如iOS和Android手機)設計的網站通常具有更大的默認字體大小和簡化的導航。有些網站還利用了觸摸屏界面,為滑動,旋轉,捏合和縮放提供支持。移動優化網站還可以刪除不必要的內容以減少滾動的需要。由於觸摸屏不支持鼠標指針,因此通常會刪除圖像翻轉和其他鼠標懸停功能。

有幾種方法可以實現響應式網頁設計。一種方法是動態檢測用戶的平台(例如iPad或iPhone)並為相應的設備加載特定的HTML和CSS。另一種選擇是使用媒體查詢,根據瀏覽器窗口的大小自動加載不同的CSS樣式。Bootstrap包中包含多個預先編寫的JavaScript和CSS文件,它基於媒體查詢,通常用於響應式Web設計。

RWD網頁有什麼好處?


RWD響應式網頁設計又稱為回應式網站設計,是指網站能跨平台使用,自動偵測使用者上網的裝置尺寸,能針對不同螢幕的大小而自動調整網頁圖文內容, 讓使用者在用手機瀏覽您的網站時,不用一直忙著縮小放大拖曳,給使用者最佳瀏覽畫面。

而Google官方解釋是無論使用者透過何種裝置瀏覽網頁(包括桌上型電腦、平板電腦或手機),該網頁一律使用相同的網址和程式碼,只不過網頁的顯示效果會依據螢幕尺寸 進行調整。 “因此,Google 建議您使用 RWD,而非其他設計樣式。” 
採用 RWD 的優點之一,是您只需要維護單一網站版本,而非兩個版本。舉例來說,您不必同時維護電腦版網站 (www.example.com) 和行動版網站 (m.example.com),即可 兼顧電腦版和行動版網站訪客的使用需求。

 

參考網站:https://techterms.com/definition/responsive_web_design

 

Scroll to Top