RWD 入門與實戰講義
RWD 的基本組成:viewport
認識 viewport
viewport
用來告訴瀏覽器現在的裝置有多寬、多高。可以讓使用者在使用不同裝置看網站時,能有個基準比例。
- 根據裝置的顯示區域來展示文檔 (html)
- 可以透過放大與縮小 html,以符合裝置的可視區域
- 通常會有初始值設定縮放的級別或其他規則
viewport 語法
width
:使用 device-width (裝置寬度) 作為可視區域的寬度。initial-scale
:文檔初始的比例,用 1 表示 100% ,範圍從 0.1 ~ 10 可任填。minimum-scale
:最小可以縮放到 0.8 比例。maximum-scale
:最大可以縮放到 2.0 比例。user-scalable
:是否允許使用者進行縮放。no 不允許;yes 允許。
☞ 補充
iOS 10 版本提到:為了增強用戶的體驗,不管有沒有使用 user-scalable ,用戶都可以在 Safari 瀏覽器上縮放網頁。
承上,如果依然不希望使用者縮放,可以改用 JavaScript 禁用設定:
總結
- 將 viewport 應用在 RWD 網站上,可以很方便的建置一個適合手機、平板等不同裝置閱讀的環境。
- viewport 也可以應用在非 RWD 的網站
RWD 的基本組成:流動式佈局
流動式佈局介紹
流動式佈局(Fluid Web Layout)是讓網站在排版時,把寬度從px
改成%
去排版,讓網站的版面可以參考父層,並用相對比例去分配寬度。
以下利用一個簡單的範例,教大家怎麼把網站版面改寫成流動式佈局。
這是一個用px
排版的二欄式的版面

如果要將它改成流動式佈局版面,注意兩個要點:
- 把所有
px
單位改為%
,並計算好與父層的相對比例。 - 最外層使用
max-width
設定寬度
改寫後的 CSS 如下(僅列出重點語法):
流動式網格佈局
如果 HTML 的層級愈多,在計算%
時會非常不方便,所以我們可以改用流動式「網格」佈局替代。
網格系統並不是什麼新技術,從以前開始,就有許多設計師用網格在排平面或網頁稿件的版面。而現在有許多人把網格系統化,讓網頁設計師在排版時可以更快的上手,不用自己計算%
。
以下是一個 Grid System 的範例,範例中把網站總寬度切割成 12 等分,每一個區塊佔用的等份都是固定的。拖拉視窗可以發現寬度即使縮小,網格的數量也沒有減少。
☞ 補充
Bootstrap 也有網格系統(Grid System),所以我們可以使用 Bootstrap 幫我們快速建置基本的 RWD 網站。
RWD 的基本組成:客製化的 Layout 結構
一般來說,使用前面提到的網格式佈局,就可以做出一個 RWD 網站。但如果我們要在版面縮小時,修改元件樣式或控制元件出現/消失… 等,這些是「網格式佈局」做不到的,因為網格式佈局只管寬度其他都不歸他管 XD。
因此,我們可以用 CSS 的 Media Query 語法幫我們實現這些功能或需求。
Media Query(ies) 介紹
Media query 的作用是,當偵測到不同尺寸的裝置時,給予對應的 CSS 設定。
在 RWD 的實作上,就是利用 media query 做出「共用一份 html,但是排版不同」的客製化 Layout。
可以讓裝置在任何寬度下,都可以有不同的 CSS 效果,例:
- 縮小螢幕寬度時,選單跑到左側
- 縮小螢幕寬度時,某些元素消失
☞ 補充
在做 RWD 網站時,Grid System(網格系統)跟 Media Query 通常是密不可分的,所以我們會同時用到這兩個技術。
Media Query 語法解析
以下是 Media Query 的規格:
寫成我們熟悉的 CSS 語法是:
- mediatype : 裝置類型
- all
- screen
- printer // 訪客列印網站資料
- tv // 訪客用電視瀏覽網站
- …
- media feature : 裝置的規格
- max-width / min-width / width
- max-height / min-height /height
- color
- aspect-ratio
- monochrome
- …
參考資料: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
如何呼叫 Media Query
呼叫 media query 就跟呼叫 CSS 一樣,大致上有以下三種寫法:
1. 在 HTML 嵌入 CSS 檔案,這份 CSS 檔案會依據 media query 的設定顯示。
2. 在 CSS 檔案裡寫下 media query 的設定以及相關 CSS 語法
3. 在 CSS 裡使用 @import 嵌入另外一個 CSS 檔案
☞ 補充
雖然有這三種呼叫方式,但我們通常都只會使用第二種方法唷~。
Media Query 練習
這是一個已經用流動式佈局排好的頁面:

依照以往上課經驗,初學者在練習 Media Query 時,往往不知道該如何下手。我建議大家一開始先不要管「寬度」,只要先想著,如果我要做好這個功能,應該用哪些 CSS 語法?確定結果是你想要的後,再把這些耶你修改的語法單獨拉出來並加上寬度的條件。
☞ 練習一
網站寬度在 400px ~ 700px 之間,將 #sidebar
跟 #aside
的位置互換。
我們可以從頁面語法瞭解#sidebar
以及#aside
都已經用float
排好版面了,如果要讓兩個區塊位置互換,其實只要在float
上動點手腳即可:
☞ 練習二
網站寬度在 0px ~ 500px 之間,選單會從左右變成上下排列。
這個練習根據你的思維與慣用的語法不同,至少可以有四種寫法。在此根據思維的不同,分享兩個寫法給大家:
寫法一:
假設我們已先設定好選單在桌機版的樣式:
那麼 media query 可以這樣寫:
☞ 補充
因為瀏覽器的寬度沒有負數,所以當寬度是 0 的時候,可以把 min-width
整段省略
寫法二:
因為我們還沒有寫選單的樣式,而#menu
沒有排版時,預設就是上下排列的狀態,因此可以把這個練習題目想成:寬度在 500px 以上,選單會變成左右排列
那麼我們只需要這樣寫就可以囉:
「RWD 入門與實戰」的講義暫時分享到此,因為後面的課程是直接用 Bootstrap 的 Grid System 做一個版面,比較難用文字描述,請見諒。
另外課程最後還有一些進階的 RWD 實作,例如設計 Grid 的思維、完全實現文字的縮放,純 CSS 實現表格的 RWD… 等等,這些在「廣州前端分享會」的簡報都可以看到唷。之後有時間會再整理成文章讓大家更瞭解其中的奧妙 😀
最後感謝各位的觀看,希望這篇文章可以幫助到各位唷。有任何問題,也歡迎在文章底下留言詢問~
☞ 延伸閱讀
如果對 Media Query 還不是很懂的話,建議可以看我在 2012 年寫的 CSS Media Queries 介紹與基礎應用