國
立 政 治 大 學
‧
N a
tio na
l C
圖 22. 系統實作流程圖h engchi U ni ve rs it y
4.2 響應式網頁設計(Responsive Web Design)
響應式網頁設計(Responsive Web Design, RWD)，或稱自適應網頁設計、回應式網頁設計、
對應式網頁設計。這是一種網頁設計的技術作法，可以讓手機、筆記型電腦、平板電腦、
桌上型電腦等使用同一網站的圖文內容及資料庫。在不同尺寸或解析度的行動裝置或螢幕 上，網頁程式會根據使用者所使用的裝置或設備，以符合版面大小的樣式來顯示網頁的內 容。可以減少使用者進行縮放、平移和捲動等操作行為，提昇畫面的可瀏覽性及使用介面 的親和度。我們在進行網站功能設計時，加入響應式網頁設計的方法，讓使用者方便於使 用各式各樣的裝置或設備來進行共同創作旅遊故事。實作響應式網頁設計(Responsive Web Design)需要設定可視區域(Viewport)、設計網格系統(Grid System)和媒體查詢(Media Query)。
‧
HTML5 提供<meta>標籤讓網頁設計師可以控制可視區域(Viewport)，Viewport 是使用者 在網頁上的可見區域，它會隨著設備(Device)而變化，在手機上的顯示畫面比在電腦螢幕 小。<meta> viewport 元素為提供瀏覽器有關如何控制頁面尺寸和縮放的說明。如圖 23 是 在網頁中包含的<meta> viewport 元素，其中 width = device-width 是指將頁面寬度設置為遵 循設備的屏幕寬度，initial-scale=1.0 是指畫面載入初始的縮放比例為 100%。
圖 23. 網頁中包含的<meta> viewport 元素
設計網格系統(Grid System)的部分，我們參考 Bootstrap 提供的一套響應式、移動設備 優先的流式網格系統，隨著屏幕或可視區域(Viewport)尺寸的增加，系統會自動分為最多 12 列。Bootstrap 網格系統(Grid System)的工作原理是指網格系統(Grid System)經過一系列包含 內容的行和列來創建頁面佈局。下列為 Bootstrap 網格系統(Grid System)運作原理[30]：
1. 行必須放置在.container class 內，以便獲得適當的對齊(alignment)和內邊距(padding)。
2. 使用行來創建列的水平組。
3. 內容應該放置在列內，且唯有列可以是行的直接子元素。
4. 預定義的網格類，比如.row 和.col-xs-4 ，可用於快速創建網格佈局。
5. 列通過內邊距(padding)來創建列內容之間的間隙。該內邊距是通過.rows 上的外邊距 (margin)取負，表示第一列和最後一列的行偏移。
6. 網格系統是通過指定您想要橫跨的十二個可用的列來創建的。例如：要創建三個相等的 列，則使用三個.col-xs-4。
‧ 國
立 政 治 大 學
‧
N a
tio na
l C h engchi U ni ve rs it y
圖 24. 設計網格系統(Grid System)
@media 規則用於媒體查詢(Media Query)，媒體查詢(Media Query)是非常別緻的"有條 件的 CSS 規則"，它只適用於一些基於某些規定條件的 CSS。如果滿足那些條件，則應用相 應的樣式。Bootstrap 中的媒體查詢允許使用者基於可視區域(Viewport)大小移動、顯示並隱 藏內容。如圖 25 的媒體查詢(Media Query)在 LESS 文件中使用，用來創建 Bootstrap 網格系 統中關鍵的分界點閾值。媒體查詢(Media Query)可以用於檢查許多內容，例如：
1. 可視區域(Viewpoint)的寬度和高度。
2. 設備(Device)的寬度和高度。
3. 方向(Orientation)，橫向或縱向模式下的平板電腦或手機。
4. 解析度(Resolution)。
圖 25. 網格系統中關鍵的分界點閾值
‧ 國
立 政 治 大 學
‧
N a
tio na
l C h engchi U ni ve rs it y
我們使用 Google 行動裝置檢測(Responsive Web Design By Google)網站來測試我們所建 立的 CAPforTravel 網站是否符合響應式網頁設計(Responsive Web Design)，我們得到的回應 是此網頁適合透過行動裝置瀏覽。
圖 26. Google 行動裝置相容性測試
圖 27. 網頁適合透過行動裝置瀏覽
‧ 國
立 政 治 大 學
‧
N a
tio na
l C h engchi U ni ve rs it y
如圖 28 是我們響應式網頁設計的實作呈現結果。我們將頁面拉大或是縮小，可以改變 頁面的呈現方式。如果使用者是使用電腦螢幕(解析度高)來欣賞旅遊故事內容，會以兩欄式 呈現。如果是使用手機(解析度低)，則改為單欄式呈現。
圖 28. 響應式網頁設計實作呈現(兩欄式和單欄式)