作者簡歷

目前任職於凌群電腦軟體事業群，參與桃園市教育局的專案系統開發，專案主要使用語言為C#、ASP.NET，並且使用PostgreSQL、SQL Server等資料庫系統。

前言

隨著行動網路的普及，各種行動裝置如雨後春筍般出現，各式各樣的螢幕尺寸在開發者未考慮到的情況下，恐在瀏覽網站時造成破版、閱讀不易等問題，降低使用者體驗。而響應式網頁設計（英語：Responsive web design，通常縮寫為RWD），或稱自適應網頁設計、回應式網頁設計、對應式網頁設計。是一種網頁設計的技術做法，該設計可使網站在不同的裝置（從桌面電腦顯示器到行動電話或其他行動產品裝置）上瀏覽時對應不同解析度皆有適合的呈現，減少使用者進行縮放、平移和捲動等操作行為。



響應式網頁設計優點

一、開發維護成本與時間較低廉

響應式網頁設計的好處在於開發者只須要維護單一網頁版本即可兼具各類裝置的訪問使用，大至一般桌上型電腦，小至手機，皆可舒適的瀏覽。而如果是APP，除了需要分別開發 Android和iOS版本增加開發成本外，還需要審核上架、通知用戶更新等過程，才能讓使用者瀏覽最新版的內容。而相較於手機版網頁與電腦版網頁分別開發的方式，需要偵測裝置的小程式才能在使用電腦讀取手機版網頁時開啟電腦版網頁、手機讀電腦版網頁時跳至手機版網頁。減少偵測裝置再跳轉的過程。



二、內容與風格的一致性

同一網站適用於各種裝置，除了內容維持不變外，視覺效果也能輕易地保持一致。並由於響應式網頁的特性，使用者不必忙碌於縮小放大的拖曳操作即可看清網頁內容，能有較佳的使用體驗，增加使用者停留時間與興趣。



三、利於網路行銷與分享

行動裝置的搜尋是以搜尋網頁為主，並不會搜尋APP，因此APP需要再另外行銷宣傳才可能讓使用者知道這個APP，並需要引起使用者的興趣與下載。所有的網路行銷都需要網站作為連結對象，而同樣的內容分為電腦版與手機版2個網址，則會讓按讚數、流量分析等拆成2個數據，而響應式網頁設計就沒有這個問題了。



四、有利搜尋排名

響應式網頁設計的原理與使用習慣都有利於於SEO(搜尋引擎最佳化)，在我們經常用的搜尋引擎如google上，可以有效地提升排名，增加網頁能見度。



響應式網頁設計的缺點

一、小螢幕尺寸不適合複雜的功能

過多的功能在小螢幕尺寸上難以顯示，如過多的刪減內容，造成差異過大的，另作手機版網頁較適合。

二、載入速度問題

由於響應式網頁是將不同螢幕尺寸的HTML及CSS皆放在同一網頁上，即使是在手機畫面上隱藏的元素，依然會讀取。因此載入速度會比只讀取手機版代碼的網頁慢。

響應式網頁設計重點

一、設計檢視區

我們需要設定網頁的viewport告訴browser目前的裝置尺寸，控制網頁的大小和縮放以適應不同的螢幕大小。大部分的情況會加以下代碼以自適應螢幕尺寸。



width=device-width：自動符合所有不同手機螢幕他們自己的預設最佳解析度。
initial-scale=1：設定手機螢幕畫面的初始縮放比例為 100%。

二、使用CSS的@media應對不同寬度的瀏覽器

根據不同寬度的瀏覽器，我們可以給予其不同的頁面設定，下面為基本格式，針對不同的query載入相對應的CSS



實際舉例如下



常用 min-width、max-width、min-height 和 max-height等屬性來判斷螢幕寬度

三、使用流動性/比例式網格系統

大多數版面配置可以分成五大外觀設計模式，以下依序介紹：主體為流動 (mostly fluid)、欄內容下排 (column drop)、版面配置位移 (layout shifter)、微小調整 (tiny tweaks) 和畫布外空間利用 (off canvas)。(最初是由 Luke Wroblewski 識別出來的這些模式)

• 主體為流動 (mostly fluid)
  
  
  
  《圖九》
  
  
  在空間足夠的中大型螢幕上，column會保持設定的大小水平排列，而在小螢幕時column寬度則等同於螢幕寬度100%形成垂直堆疊。
  
  主要優勢是它在小螢幕與大螢幕之間， 只需要一個中斷點。
  
  
  
  《圖十》



• 欄內容下排 (column drop)
  
  
  
  《圖十一》
  
  
  螢幕大時，3個 column 平行排列；銀幕較小時，其中一個側邊欄移到頁面底端；最後銀幕更小時，另一個側邊欄也移到頁面底端，3 個 column 垂直排列。
  
  
  
  《圖十二》



• 版面配置位移 (layout shifter)
  
  
  
  《圖十三》
  
  
  螢幕大時，依照欄位分配比例，左邊是持續存在的30%分割，右邊則依70%分割的比例堆疊排列。而在小螢幕時變為寬度皆為100%的堆疊排列
  
  維護較複雜
  
  
  
  《圖十四》



• 微小調整 (tiny tweaks)
  
  
  
  《圖十五》
  
  
  單一 Column，只是隨銀幕寬度調整標題與文字的大小與間距。
  
  適用於單欄版面配置，例如單網頁線性網站、大量文字的文章
  
  
  
  《圖十六》



• 畫布外空間利用 (off canvas)
  
  
  
  《圖十七》
  
  
  螢幕夠大時顯示完整的選單。但在小螢幕時，將選單或內容放在螢幕外，按一下按鈕之後才顯示出來。
  
  優點
  ‧節省空間，上方可放置更多內容，在不需要使用時候隱藏起來。
  ‧畫面動作優雅。
  
  缺點
  ‧需要JavaScript 實作區塊顯示/隱藏的效果。
  ‧實作於手機平台需要注意動畫效果的效能。

結論

響應式網頁設計最重要的觀念就是：「提供給使用者最佳的體驗效果」，舉凡網頁破版問題、按鈕或輸入框難點選輸入、文字圖片的排版不適造成使用者難以閱讀等，時時刻刻考驗著程式設計師的細心程度，尤其螢幕相對狹小的行動裝置，在字體大小間距、文字圖片的排版、內容的取捨都應根據不同大小的螢幕給予合適的設計才能達到面面俱到。善加規劃利用這項技術，可以讓我們在較低成本的開發上得到更高的效益。

參考文獻

1. https://zh.wikipedia.org/wiki/響應式網頁設計

2. https://www.ibest.tw

3. http://www.flycan.com/article/mobile-web/meta-veiwport-1316.html

4. https://developers.google.com/web/fundamentals/design-and-ux/responsive/?hl=zh-tw

5. https://cythilya.github.io/2015/04/22/responsive-patterns-layout/

6. https://blog.kdchang.cc/2016/10/11/responsive-web-design-tutorial-introduction/

7. https://imjaylin.com/響應式網頁設計/

8. https://www.icisco.cc/blog/rwd-interface-design/