Loading...

在學習網頁前端開發時,不可避免地一定會常聽到 RWD 這個詞,可能隱約也講的出像是「什麼響應式的」、「一種網頁設計方式」、「手機也可以用的網頁」的概念,但仍舊有些一知半解。

本文將嘗試用簡單的方式,重新整理各種 RWD 相關的資訊,由淺入深來介紹 RWD。

3分鐘小測驗,找到你的程式自學入口

RWD 基本概念

RWD(Responsive Web Design)中文翻作「響應式網站設計」,是一種為了讓網頁在各種尺寸的裝置下,畫面都能呈現合適比例的設計原則

(圖片出處)

有一種更容易理解 RWD 概念的比喻是「內容就像水」。

當你在設計網站排版時,能根據 RWD 的設計原則實作,網站內容就會像水一般,在各種裝置中自然的流動成最適當的樣子。

上圖以 Medium 為例,當你試著調整視窗寬度時,會發現網頁內容隨著寬度變小而變換版面,我們就可以說這個網站符合 RWD 的設計原則。

為什麼要用 RWD

近幾年隨著行動網路的取得越來越方便,更多的使用者開始使用各種不同裝置來上網。

許多網站因應這樣的趨勢將服務面向使用手持裝置的使用者,除了將網站服務另外開發成手機 APP、使用行動版網站(像是 Facebook 手機版)等,但這些方法都需要較大的成本去維護。

而 RWD 這樣單純使用 CSS 媒體查詢控制版面的設計方式,不管什麼裝置都在同一個網站上開發,在維護及成本的考量上就具有相對大的優勢,且在分享、搜尋排名上也都比一般行動版網站來得好。

RWD 基本實作方法

要將網頁使用 RWD 實作有以下幾步設定與做法:

  • 設定 viewport
  • 決定 RWD 設計模式
  • 套用 CSS media query
  • 使用相對單位設定寬高、大小

1. 設定 viewport

viewport(檢視區)指的就是瀏覽網頁時瀏覽器顯示畫面內容的區域。

而在針對要實作 RWD 的網頁中,HTML 的 head 部分必須設定 viewport,舉例像是:

<p>CODE: https://gist.github.com/DezChuang/96aead3ed2802e25a65dba99817dd66a.js</p>

這個設定可指示瀏覽器如何控制網頁的大小和縮放。

2. 決定 RWD 設計模式

再來最重要的一步,就是要決定網頁內容在不同 viewport 下的版面如何配置、流動。

在 RWD 中有五種比較常用的設計模式:局部流動 (mostly fluid)、欄內容下排 (column drop)、版面配置位移 (layout shifter)、細微調整 (tiny tweaks) 和畫布外空間利用 (off canvas)。

下一個段落會針對其中幾種設計模式做深入介紹。

3. 套用 CSS media query

我們都知道版面配置主要是 CSS 的工作,所以在 RWD 中為了要在不同螢幕寬度做不同的 CSS 樣式調整,就需要使用 CSS3 中提供的 media query 語法。

media query 基本的寫法舉例如下。例如我們要針對「螢幕尺寸在 600px 以上時,對 <p> 設定字體大小為 20px 」:

<p>CODE: https://gist.github.com/DezChuang/a0f34d30950cde9f62867479ed3dbca8.js</p>

這邊的 min-width: 600px 就是我們的篩選條件,所有在「螢幕尺寸 600px 以上」的 CSS 內容都可以寫在這個 scope 中。因此我們可以使用 media query 的寫法,順利的達到在各種尺寸下設定我們期待的樣式,不論是圖片大小、字體大小、容器寬高等。

4. 使用相對單位設定寬高、大小

最後要注意在不同尺寸的 CSS media query 中,內容的寬高、大小,大多會使用「相對單位」來設定,像是 width: 50%width: 100vhheight: 80vhfont-size: 2em 等,如此才能在該範圍的 viewport 中達到 RWD 的效果。

RWD 設計模式

上面提到的 RWD 設計模式,以下針對 mostly fluid、column drop 這兩種最常見的設計模式做基本介紹:

局部流動(mostly fluid)

圖片來源

mostly fluid 在小尺寸螢幕時,內容會以垂直堆疊的方式排列;隨著螢幕尺寸變大時,內容會流動成多欄的方式,直到達到某個尺寸後,將內容置中並停止流動。

這裡提供 CodePen 範例 demo,其中 media query 的設定如下:

<p>CODE: https://gist.github.com/DezChuang/b58e333347c0da4ad553fff9a2b6a615.js </p>

欄內容下排(column drop)

圖片來源

column drop 在大尺寸時會以多欄版面配置,隨著視窗寬度變窄時,內容會垂直堆疊所有欄。

這裡提供 CodePen 範例 demo,其中 media query 的設定如下:

<p>CODE: https://gist.github.com/DezChuang/bd2a4ad264d08af275149ff56f2598cb.js </p>

RWD 實作工具

最後再簡列出現今實作 RWD 開發時,幾個常用的佈局系統與框架,這些工具都可以加速 RWD 的開發效率:

  • Flexbox
  • Grid
  • 使用 CSS 框架實作 RWD,例如 Bootstrap

結語

隨著使用手持裝置上網已經是瀏覽網站的趨勢,RWD 可以說是學習網頁前端切版時一個不可或缺的技能。

本文簡要的介紹關於 RWD 的基本概念、重要性、實作方法、設計模式、實作工具,期待能帶給對 RWD 尚不太熟悉的開發者一些啟發,進而去利用 RWD 這個概念去開發網頁,提供更好的設計與體驗給使用者。

參考資料

延伸閱讀

想要進一步學好前端基礎?8周建立完整前端技能

成為企業渴求的程式人才!

在家學會 JavaScript 網路開發

全新「全端 Web App 開發」課程,給你看得見的學習成效!
超過 90% 轉職成功,400 位來自亞洲各國的 ALPHA Camp 校友,畢業後達成轉職、創業、出國工作的夢想!

探索「全端 Web App 開發」課程

給期待創新改變的你

前端x後端x全端 完整工程師技能樹

90% 學生轉職成功,職涯競爭力更上層樓
最專業的「全端 Web App 開發」課程,上班族邊工作也能同時培養第二專長!

加入 ALPHA Camp 學程式開發

學期一|程式設計入門

零基礎也學得會的程式入門課!

開始學帶得走的技能,為自己未來的成長鋪路

學期二|JavaScript 完整前端基礎

系統化學習 JavaScript

實作打好前端基礎,成為扎實的網頁開發者

今年最後機會,程式入門12月班 倒數5天
馬上報名