了解 CSS Media Queries 配置 RWD 網頁

最近在家閒著沒事就會看一下網頁相關的設計，想了解一下要怎麼設計出美美的網頁。昨天因為新增部落格的一些個人資訊，就開始研究研究 RWD 響應式網頁。雖然我的部落格主題是基於 BootStrap 做出來，可以直接套用他的類別，但看完許多教學之後，覺得有一些用法應該還是要記錄一下，說不定以後需要用到時，才發現太久沒碰又忘記了。

簡單介紹

製作 RWD 響應式網頁時，一定會搭配 @media screen 屬性，當初在一些網頁模板的 CSS 檔案中，看到這個屬性還納悶好久呢，果然是菜鳥一隻XD。總之，如果要針對不同裝置做出不同效果，就需要 CSS 的 Media Queries，中文叫做「媒體查詢」，顧名思義就是判斷現在的媒體裝置是什麼，進而配置對應的 CSS 樣式。

當時看不懂的原因就在這裡，因為我一直以為 CSS 樣式表就只是設定網頁標籤的屬性而已，不會有判斷的功能，小弟才疏學淺，真是慚愧，小時候都沒好好讀書。

如果使用 Media Queries，那網頁就會先去「詢問 (query) 」目前的瀏覽「媒體 (media)」，只要符合設定條件就會套用 CSS 樣式；反之，不符合可能就是不套用或套用其他樣式。這樣的「邏輯」特性才得以讓網頁可以更彈性的去做變化。

Media Queries 的使用方法

分成三種，一種是寫在 HTML 裡面、另一種是直接寫在 CSS 裡面、最後一種是在 CSS 裡面呼叫。

寫在 HTML 裡面

• 直接詢問裝置

<link rel="stylesheet" media="screen" href="style.css" />

• 詢問裝置並附加條件

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

寫在 CSS 裡面

• 直接詢問裝置

@media screen {
  * { font-family: sans-serif; }
}

• 詢問裝置並附加條件

@media screen and (min-width: 900px) {
    .class {
        background: #666;
    }
}

在 CSS 裡面使用 @import 的方式

利用 @import "style.css"; 並搭配 Media Queries 來匯入樣式表。

• 直接詢問裝置

@import "style.css" screen;

• 詢問裝置並附加條件

@import url(color.css) screen and (min-width: 400px);

其實三種方式都可以做到一樣的效果，感覺如果沒有要特別需求應該直接照第二種方式寫在 CSS 的樣式表裏就行了。

Media 的類型和特徵

Media Types

顧名思義就是讓網頁去詢問目前的裝置類型。

Media 類型	說明
all	所有裝置
print	印刷裝置
screen	螢幕裝置
speech	朗讀裝置

Media Features

有了裝置的類型之後，還可以更進一步去取得裝置的屬性特徵，這樣就可以做更多判斷。需要注意的就是要用小括號將 Feature 包覆起來，通常搭配 Media 邏輯關鍵字就可以做出 RWD 響應式網頁。

特徵大致可分頁面尺寸、顯示品質、顏色、互動。由於特徵眾多就不詳細介紹，可參閱 參考[3] 的文章。

用頁面尺寸的特徵來判斷瀏覽器寬度。

最常用的特徵應該是頁面尺寸的屬性了，分別是 width、height、aspect-ratio 跟 orientation，其中最常用的應該就是 width 跟 height，接下來就直接說明如何使用 width 簡單實現 RWD 響應式的功能。

Max-Width

若瀏覽區域的寬度小於 600 px，則下方的 CSS 描述就會立即被套用：

@media screen and (max-width: 600px){
    .class{
        background: #ccc;
    }
}

Min-Width

若瀏覽區域的寬度大於 900 px，則下方的 CSS 描述就會立即被套用：

@media screen and (min-width: 900px) {
    .class {
        background: #666;
    }
}

Min-Width and Max-Width

網頁寬度範圍在 321 px ~ 768 px，則下方 CSS 描述會立即被套用：

@media only screen and (min-width: 321px) and (max-width: 768px) {
    .class {
        background: #666;
    }
}

Note：從剛剛幾個例子可以看到可以用 min-、max- 來設定 width 特徵的範圍屬性。

CSS Media Queries 的使用方式

Queries 有四種使用方式，分別是 or、and、not 和 only。基本上 or、and 很好理解也最常使用，主要是 not、only 屬於是處理特殊情況才會使用。

AND

所有情況符合才會成立。

範例：網頁寬度需在 321 px 以上，在 768 px 以下才會成立。

@media only screen and (min-width: 321px) and (max-width: 768px) {
    .class {
        background: #666;
    }
}

OR (可以用逗號，)

只要其中一項符合就會成立。

範例：當裝置直立或是寬度小於 200 px 時就會成立。

h1{
      font-size:30px;
  }
  @media (orientation: portrait), (max-width:200px){
      h1{
          font-size:50px;
          color:red;
      }
  }

取自 參考[3] 的文章。

NOT

在於排除一些裝置媒體，會寫在 media query 的字首。

ONLY

指定「只有」某種裝置媒體才能套用某些樣式，跟 NOT 一樣會寫在 media query 的字首。

Refer

[1] Mobile Web 前端技術筆記(二): Media Queries 與 CSS – 烏托比亞 (wordpress.com)

[2] Day22：小事之 Media Query – iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)

[3] CSS Media Queries 詳細介紹 – OXXO.STUDIO (oxxostudio.tw)