本文已搬家到筆者自己的部落格嘍，有興趣的可以點這個連結～

什麼是響應式網頁設計(Responsive Web Design)

響應式網頁設計(Responsive Web Design)是一種讓網頁可以在不同的裝置上皆有適合的呈現模式，讓使用者在任何裝置上都可以用正常的操作方式來瀏覽網頁， RWD 的宗旨在於內容像水一樣可以完美地適應任何一個新的環境，也奠定了未來的網頁開發模式。

早期智慧型手機剛出來的時候，因為手機螢幕比一般的顯示器來的小很多，那時候的網頁都要透過使用者自行縮放進行瀏覽十分的不方便，當時的解決之道就是重新寫一個網頁並且新增一個網址為 m.xxx.com.tw 的網頁來讓手機瀏覽，如下圖。

但這樣會增加前端工程師的作業量，要製作兩種不同的網頁非常的累，這時後有一位著名的設計師就說了：何不讓網頁自己去做調整呢？藉著 CSS Media Queries 讓我們可以輕鬆的達到響應式網頁設計，接下來就讓我們來熟悉 RWD 的設計模式吧！

CSS Media Queries

既然是一種 Query 想當然一定會配合條件限制來達到期望的結果，在開始介紹 Media 的相關內容之前先簡單的介紹一下條件語法。

• not

  用來排除某些設備的樣式，假如有AB兩個設備，其中有一個樣式是想要A有卻不想要B有，這時候就可以用 @media A not B 的方式來讓A設備有指定樣式。

• only

  用於一些老舊不支援 Media Queries 的瀏覽器，不過現今的瀏覽器都支援 Media Queries 了，所以這個語法了解就好了XD

• and

  and 是最常使用的語法，翻成中文可以想成 而且 ，用邏輯的方式去想就代表左右兩邊均成立這個條件才成立，而 and 最常被擺在等等要介紹的 Media Feature 進行串接。

條件語法就只有這三項而已非常簡單接下來就來開始介紹重頭戲： Media Rule 吧！

• Media Type

  Media Type 有非常多種，筆者在這邊僅列出最常用的三種：

  • all

    用於全部的裝置。

  • print

    用於印表機，此樣式套用於預覽列印中。

  • screen

    用於所有的螢幕，舉凡電腦、手機、平板裝置等螢幕皆適用於此。

• Media Feature

  Media Feature 也有非常多種，這邊筆者僅介紹用於 RWD 上的幾種 Features ：

  • width

    寬度可分為 最大寬度(max-width) 以及 最小寬度(min-width) 兩種，用於裝置寬度範圍內的特定樣式。

  • height

    高度可分為 最大高度(max-height) 以及 最小寬度(min-height) 兩種，用於裝置高度範圍內的特定樣式。

  • orientation

    當裝置處於 直立(portrait) 以及 橫向(landscope) 時會有特定樣式。

接下來讓我們把 Media Rule 以及條件語法結合成 Media Query 吧！

/* 當裝置寬度介於300~600px之間，className為container會有display: none;的樣式 */
@media screen and (max-width: 600px) and (min-width: 300px) {
  .container {
    display: block;
  }
}

總結

其實 RWD 實作非常簡單，只要把 Media Queries 搞懂就可以了，難處在於要如何設計在不同的寬度中要如何顯示才能方便使用者操作，這邊筆者提供一個範例來簡單描述一下 RWD 在各個裝置上的基本設定，各位不妨先把 Codepen 外觀調成程式碼在左右兩側，藉著左右移動頁面與程式碼之間的捲軸來觀看頁面item的變化。