傾囊相授 ! MUKI 的 RWD 入門與實戰課程分享

日期：2017.05.08
留言數：0
標籤：media query responsive 原創實作課程講義

Avoid

以下內容是我在 RWD 入門與實戰課程的講義內容，免費放出來讓大家閱讀學習，歡迎分享與轉載 ( 請註明出處來源 )。
請勿盜用或用於商業用途，一但發現必定追究到天涯海角。

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 允許。

☞ 補充

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

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

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

總結

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

<!-- 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" />

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 等分，每一個區塊佔用的等份都是固定的。拖拉視窗可以發現寬度即使縮小，網格的數量也沒有減少。

☞ 補充

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

@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
- …

參考資料： http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

如何呼叫 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 介紹與基礎應用