我在 2012 年寫過一篇 CSS Media Queries 介紹與基礎應用，後來也陸續開了一些 RWD 相關課程，也有在一些研討會分享過 RWD 技術，因為資源散落各地，所以決定利用部落格將我分享過的 RWD 資訊做個整合，讓大家可以快速上手。

另外我也會將自己的「RWD 入門與實戰」這個付費課程講義公開，讓大家可以在部落格內閱讀。為什麼要把付費內容免費化呢？其實我覺得， RWD 已經存在一段時間了，相信很多人都已經會了，就算不會，網路上也有許多分享文章可參考，「觀念」也沒什麼好藏私的，愈多人會 RWD，我們之後的進階課程才會輕鬆啊(笑)。

其實想要把內容公開化已經想很久了，突然如此積極還有另外一個原因，就是我在網路上看到有人盜用了我的講義內容，然後把他公開在網站上，好像還用這些內容去開課(這種行為真是令人不齒)。更扯的是，他盜用我的內容後還有附上一些課後補充，就是沒附上我的連結，是心虛嗎？哼～總之，我歡迎大家分享我公開的資料，但與其我的東西被盜用，還不如我自己公開分享啊啊～～

如果各位之後在其他地方看到這些內容，請不用懷疑，我以我的人格保證，他們絕對非原創絕對是盜用，因為這些東西都是我一個字一個字打出來的。也歡迎大家用力檢舉或是告訴我唷 ^___^

以上癈話到此結束，接下來開始進入正題吧。

RWD 相關簡報分享

我的 RWD 簡報都發在 slides.com 裡，大家可以直接點進去看，或是在部落格里閱讀。

RWD 入門與實戰課程簡報

這份簡報是「RWD 入門與實戰」的上課簡報，裡面有很基礎的 RWD 觀念，適合還沒碰過 RWD 卻有興趣想瞭解的朋友。跟練習有關的簡報我都已經拿掉了，我這堂課的兩大重點：

• RWD 是由什麼組成的
• 如何實作 RWD。

這份講義重點在「RWD 是由什麼組成的」，另外上了幾次課之後，我改為使用 gitbook 做線上講義，所以這份簡報就沒再更新了。

2015 廣州前端分享會

這份是最早釋出的 RWD 簡報，是我去廣州的一場分享。這份簡報內容很多，到最後也沒講完，裡面列出了做 RWD 會碰到的一些問題，適合已經有 RWD 實作經驗的朋友閱讀。

簡報後面的「那些年我硬幹的事情」，是在分享已經上線的網站如何硬幹成 RWD 網站。

2015 高雄 MOPCON

2015 年底參加了高雄的 MOPCON，一樣是在講 RWD。

這份簡報可以看作是融合的「RWD 入門與實戰」以及「廣州前端分享」的精華，也是適合給有 RWD 實作經驗的朋友閱讀。

簡報比較偏「秀」，為了演好這場秀，裡面會帶上很多插圖，思緒也比較跳躍，所以後來我上課才改用講義，講義就比較像我的寫文風格，系統化 + 平鋪直敘 (自己說 XDDD)。

RWD 的基本組成：viewport

認識 viewport

viewport 用來告訴瀏覽器現在的裝置有多寬、多高。可以讓使用者在使用不同裝置看網站時，能有個基準比例。

• 根據裝置的顯示區域來展示文檔 (html)
• 可以透過放大與縮小 html，以符合裝置的可視區域
• 通常會有初始值設定縮放的級別或其他規則

viewport 語法

<meta name="viewport" content="width=device-width", initial-scale="1.0" minimum-scale="0.8" maximum-scale="2.0" user-scalable="no" />

• width：使用 device-width (裝置寬度) 作為可視區域的寬度。
• initial-scale：文檔初始的比例，用 1 表示 100% ，範圍從 0.1 ~ 10 可任填。
• minimum-scale：最小可以縮放到 0.8 比例。
• maximum-scale：最大可以縮放到 2.0 比例。
• user-scalable：是否允許使用者進行縮放。no 不允許；yes 允許。

用 Javascript 禁止縮放

iOS 10 版本提到：為了增強用戶的體驗，不管有沒有使用 user-scalable ，用戶都可以在 Safari 瀏覽器上縮放網頁。

承上，如果依然不希望使用者縮放，可以改用 JavaScript 禁用設定：

document.documentElement.addEventListener('touchstart', function (event) {
  if (event.touches.length > 1) {
    event.preventDefault();
  }
}, false);

不使用 RWD 的錯誤用法

如果你的網站不想使用 RWD，希望手機跟桌機看到的版面是一樣的，那可以加上 content="width=1024"，告訴瀏覽器網站寬度為 1024px。但切記，千萬不要再加上 user-scalable="no" 的設定，因為這個是不讓使用者縮放螢幕。

試想，你的網站寬度固定為 1024px，但手機螢幕就是那麼小，你又不准使用者縮放，他們一定會看不清楚裡面的文字。所以請記得，不要同時使用這兩個語法。

<!-- 1024 為實際頁面寬度 -->
<meta name="viewport" content="width=1024", initial-scale="1.0" />

<!-- 非 RWD 網站常見錯誤用法 -->
<meta name="viewport" content="width=1024", initial-scale="1.0" user-scalable="no" />

總結

• 將 viewport 應用在 RWD 網站上，可以很方便的建置一個適合手機、平板等不同裝置閱讀的環境。
• viewport 也可以應用在非 RWD 的網站

RWD 的基本組成：流動式佈局

流動式佈局介紹

流動式佈局(Fluid Web Layout)是讓網站在排版時，把寬度從 px 改成 % 去排版，讓網站的版面可以參考父層，並用相對比例去分配寬度。

以下利用一個簡單的範例，教大家怎麼把網站版面改寫成流動式佈局。

▼ 這是一個用 px 排版的二欄式的版面

如果要將它改成流動式佈局版面，注意兩個要點：

• 把所有 px 單位改為 %，並計算好與父層的相對比例。
• 最外層使用 max-width 設定寬度

改寫後的 CSS 如下(僅列出重點語法)：

#wrapper {
  max-width: 900px;
}

#main {
  float: left;
  width: 72.777%;
}

#sidebar {
  float: right;
  width: 27.223%
}

流動式網格佈局

如果 HTML 的層級愈多，在計算%時會非常不方便，所以我們可以改用流動式「網格」佈局替代。

網格系統並不是什麼新技術，從以前開始，就有許多設計師用網格在排平面或網頁稿件的版面。而現在有許多人把網格系統化，讓網頁設計師在排版時可以更快的上手，不用自己計算%。

以下是一個 Grid System 的範例，範例中把網站總寬度切割成 12 等分，每一個區塊佔用的等份都是固定的。拖拉視窗可以發現寬度即使縮小，網格的數量也沒有減少。

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 的規格：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

寫成我們熟悉的 CSS 語法是：

/* 當螢幕寬度在 400px ~ 700px 之間，連結為紅色 */
@media screen and (min-width: 400px) and (max-width: 700px) {
    a {
        color: red;
    }
}

• mediatype : 裝置類型
  • all
  • screen
  • printer // 訪客列印網站資料
  • tv // 訪客用電視瀏覽網站
  • ...
• media feature : 裝置的規格
  • max-width / min-width / width
  • max-height / min-height /height
  • color
  • aspect-ratio
  • monochrome
  • ...

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

如何呼叫 Media Query

呼叫 media query 就跟呼叫 CSS 一樣，大致上有以下三種寫法：

1. 在 HTML 嵌入 CSS 檔案，這份 CSS 檔案會依據 media query 的設定顯示。

<link rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 700px)" href="style.css" />

2. 在 CSS 檔案裡寫下 media query 的設定以及相關 CSS 語法 (推薦使用)

@media screen and (min-width: 400px) and (max-width: 700px) {
  a {
      color: red;
  }
}

3. 在 CSS 裡使用 @import 嵌入另外一個 CSS 檔案

@import "test.css" screen and (min-width: 400px) and (max-width: 700px)

Media Query 練習

這是一個已經用流動式佈局排好的頁面：

依照以往上課經驗，初學者在練習 Media Query 時，往往不知道該如何下手。我建議大家一開始先不要管「寬度」，只要先想著，如果我要做好這個功能，應該用哪些 CSS 語法？確定結果是你想要的後，再把這些耶你修改的語法單獨拉出來並加上寬度的條件。

練習一

網站寬度在 400px ~ 700px 之間，將 #sidebar 跟 #aside 的位置互換。

我們可以從頁面語法瞭解 #sidebar 以及 #aside 都已經用 float 排好版面了，如果要讓兩個區塊位置互換，其實只要在 float 上動點手腳即可：

@media only screen and (min-width: 400px) and (max-width: 700px ) {
  #sidebar {
    float: right;
  }
}

練習二

網站寬度在 0px ~ 500px 之間，選單會從左右變成上下排列。

這個練習根據你的思維與慣用的語法不同，至少可以有四種寫法。在此根據思維的不同，分享兩個寫法給大家：

寫法一：

假設我們已先設定好選單在桌機版的樣式：

#menu li {
  display: inline-block;
}

那麼 media query 可以這樣寫：

@media only screen and (max-width: 500px ) {
  #menu li {
    display: block;
  }
}

☞ 補充

因為瀏覽器的寬度沒有負數，所以當寬度是 0 的時候，可以把 min-width 整段省略

寫法二：

因為我們還沒有寫選單的樣式，而#menu沒有排版時，預設就是上下排列的狀態，因此可以把這個練習題目想成：寬度在 500px 以上，選單會變成左右排列

那麼我們只需要這樣寫就可以囉：

@media only screen and (min-width: 500px ) {
  #menu li {
    display: inline-block;
  }
}

「RWD 入門與實戰」的講義暫時分享到此，因為後面的課程是直接用 Bootstrap 的 Grid System 做一個版面，比較難用文字描述，請見諒。

另外課程最後還有一些進階的 RWD 實作，例如設計 Grid 的思維、完全實現文字的縮放，純 CSS 實現表格的 RWD... 等等，這些在「廣州前端分享會」的簡報都可以看到唷。

最後感謝各位的觀看，希望這篇文章可以幫助到各位唷。有任何問題，也歡迎在文章底下留言詢問～

延伸閱讀

如果對 Media Query 還不是很懂的話，建議可以看我在 2012 年寫的 CSS Media Queries 介紹與基礎應用