響應式網頁設計

響應式網頁設計,也稱為自適應網頁設計、回應式網頁設計。由英語 Responsive Web Design 翻譯而來縮寫 RWD 是一種網頁製做方法的技術,這技術被公認在2013年網頁開發技術的重要進步之一,可以使網站在多種瀏覽裝置如桌上型電腦、行動電話、行動平板裝置顯示器上自適應其版面閱讀,不管螢幕解析度尺寸變化如何,網頁內容可以對應不同的解析度,而有不同的呈現方式,網站可以很靈活的呈現,也瀏覽者在觀看網站內容時減少縮放、移動和捲動之便利性。

隨著智慧型手機、行動平板裝置的普及且隨即可上網查詢資訊的方便,網頁的製做技術來也開始重視行動裝置上的閱讀上的靈活呈現效果。Google 公司亦表示搜尋在決定排名時,會一併考慮行動瀏覽的便利性。這項調整影響遍及全球所有語言的行動搜尋,也會對 Google 搜尋結果產生重大影響。於是回應式網頁設計自然被視為未來網頁設計的趨勢。


CSS3 Media Queries

網站開發技術使用 CSS3 Media Queries 方式,以自適應的彈性版面規劃設計,在不同解像度下改變網頁版面之佈局對應方法,讓不同的設備都可以很靈活提供最佳瀏覽。

@media screen and ( max-device-width: 480px ) {
  當螢幕解析度尺寸小於 480px 採用該區段的設置
}

網頁標頭 Viewport 設定

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

網頁的標頭 Viewport 設定,讓不同的顯示設備、行動裝置的螢幕解析度尺寸來符合最佳瀏覽。如果沒有該設定的情況,會依原本網頁整個縮小來符合顯示設備。比較起早期的手機版網頁開發都是與電腦版的網站區隔開來另外再製做,導致製做上的麻煩及成本的增加且管理上更新網頁內容時就必須要更新兩次的問題。雖然多了靈活呈現上的版面規劃但還是有一定的優勢。


RWD工業網站整理(網頁設計案例)

http://www.eion.com.tw/Mechanics/


RWD資源連結及參考資料

http://alistapart.com/article/responsive-web-design

http://mediaqueri.es/

http://www.flashuser.net/responsive-web-design-tutorials

https://developer.mozilla.org/.../CSS/Media_queries