製作網站不能沒有談到的功能 - RWD響應式設計(自適應網頁)

RWD響應式設計已經是常識了，在規劃網站的時候絕對不能沒有它

作者: 進度條編輯群更新日期: 2021/01/28

過去開發網站時，為了配合桌上型電腦以及智慧型手機（含平板）螢幕尺寸與比例的不同，需要個別開發不同的網站，來優化如智慧型手機開啟網站時的呈現效果。而專門為手機製作的網站，稱為行動版網頁(mWeb)。舉例來說，一般的的網址可能是www.abc.com，而行動版網頁通常則為m.abc.com。

通常這樣類型的設計，必須特別設計一種機制，來判定使用者開啟網站的裝置類型，決定呈現一般網站或是行動版網頁。一但判定錯誤，就會有顯示走鐘的風險。且同樣的服務，必須同時維護兩個網址的內容，更增加了維運上的成本。

(有碰過別人在Line上面傳給你連結，用電腦打開比例大到很詭異嗎？那通常就是手機專門站喔！網址通常會是m.開頭，但其實沒有硬性規定。)

為了解決這種困擾，一站式設計的RWD響應式就此誕生。

RWD響應式設計全名為Responsive Web Design，也有人稱自應性設計，主要是透過CSS的技術，讓你的網站可以在不同解析度下，來改變網頁頁面的佈局以及排版，讓不同螢幕尺寸的設計，都可以正常瀏覽同一網站，來提供最佳化的使用者體驗。

CSS在正確設定的情況下可以知道頁面顯示的大小與判斷解析度，並且可以依照不同大小對特定的元件設定不一樣的大小顏色與排列順序。所以簡單來說RWD的網站其實不會發生不同大小下某個元件被移除的事，但是可以隱藏起來。

當然主要雖然是以CSS完成，但很多時候為了更優秀的使用者體驗或是特殊的行為，還是會用到JavaScript。不過同樣的行為在效能上面用CSS會比JavaScript效能好。

利用頁面大小判斷裝置的方式其實相當簡單，舉例說明，通常不同裝置對應到的解析度如下

電腦版裝置尺寸：1024px以上
平板裝置尺寸：768px ~ 1024px之間
手機裝置尺寸：768px以下

不過這是其中一種參考，如果是Bootstrap這套CSS / JavaScript 樣式套件，他在不同的版本都略有些差異。例如Bootstrap 3 / Bootstrap 4 / Google material.io

bootstrap4

bootstrap 4

bootstrap 3

Google material.io

這邊要注意的是，通常大小指的是視窗大小，雖然手機多是滿版的，但是電腦上的視窗是可以調整的。所以利用縮放視窗，在電腦上是會看到手機版的排版。

打一下廣告！

進度條有Bootstrap 3課程喔!(部分Bootstrap 4)，雖然現在新網站是Bootstrap 4比較多，但是其實大量的舊網站還是Bootstrap 3，尤其是用WordPress架設的網站，Bootstrap 3的樣式還是遠高於Bootstrape 4。

行動第一! 使用Bootstrap建立響應式RWD網站!

如果是想自己建立RWD的功能的話，可以參考我們的基礎課程，裡面有從頭開始建立的RWD頁面
HTML, CSS, JavaScript, jQuery 網頁從零開始

對的，我們認為RWD是基礎，應該在初學的階段就要會。

來看看範例實作的成果吧！
https://progressbartw.github.io/

而RWD設計最大好處，就是可以透過一個網址來支援多種裝置顯示；只要透過程式技術，做出上述解析度的判定，來自動調整輸出畫面排版，就可以達到一站式網站呈現的效果。例如搜索結果在電腦版上，可能是圖塊的方式顯示，一旦判定成手機的解析度，就轉換成清單形式的條列呈現。這樣的一站式呈現，除了優化使用者體驗外，也大大降低了網站的維護成本。所以對大部分網站設計來說，通常RWD都會是首選考量

當然RWD也有它的極限，尤其是對於表格這樣的元件會相當不好設計。即使是Google，在很多服務(Google Cloud Platform、Google Analytics之類的服務)都還是選擇不響應式讓他直接超出顯示範圍用滾輪。像是報表圖像等，在RWD下都是不太好設計的。

另外要一提的是，RWD在設計上不見得比較輕鬆，因為有可能要針對各種不同的裝置做部分優化。有一些功能就像前面所說的問題，所以在不同的裝置上要設計完全不同的呈現方式。很多經驗不足的設計師常會設計出不適合工程開發的「好看」設計。一個好的商業網頁設計，應該是要在視覺上與工程上做到良好的協調。