CSS @media 媒體查詢 ( Media Queries )

如果要在不同解析度的螢幕上瀏覽同一個網頁，常常會透過 CSS 的方式製作 RWD 響應式網頁，而 CSS 的 @media 媒體查詢可以定義判斷不同媒體的條件，只要符合條件，就會替這種媒體套用對應的 CSS 樣式屬性，這篇教學會介紹 CSS @media 媒體查詢 ( Media Queries ) 的相關用法。

快速導覽：

認識與使用 @media

媒體類型 ( Media Types )

媒體特色 ( Media Fratures )

複合媒體查詢語法

透過 Media Queries 製作響應式網頁 ( RWD )

CSS 教學 - @media 媒體查詢 ( Media Queries )

認識與使用 @media

由於 CSS 基本上是按照權重大小進行「覆蓋並套用」樣式，不容易進行邏輯判斷套用樣式，但如果透過 CSS 的 @media 媒體查詢 ( Media Queries )，就能透過「邏輯判斷」的方式，根據裝置的媒體類型（例如螢幕或列印）或其他特性（例如螢幕解析度、方向、寬高比等 )，套用不同的樣式，如果判斷條件符合為 true 就會套用樣式，反之為 false 就不會套用樣式。

@media 共有下列三種使用方式：

在 HTML 內使用

透過 HTML <link> 標籤載入 CSS 時，可透過 media 屬性區分不同媒體。

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

在 CSS 內使用

撰寫 CSS 樣式屬性時，可撰寫 @media 與相關判斷條件，區分不同媒體要套用的樣式屬性。
```
＠media screen{
  樣式...
}
@media print{
  樣式...
}
```

使用 @import

使用 @import 載入其他 CSS 時，可在後方撰寫相關媒體查詢條件，讓不同的媒體載入不同的 CSS。
```
@import "style.css";
@import "print.css" print;
```

媒體類型 ( Media Types )

現行 CSS 支援的 Media 類型有以下三種 ( 其他像是 speech、tty、tv、projection...等已不支援，參考：W3C Media Types )：

Type	說明
all	所有設備。
print	印刷裝置，包含使用列印預覽產生的所有畫面 ( 例如列印為 pdf )。
screen	螢幕裝置，不屬於 print 的設備。

這三種類型必須寫在語句的「開頭」，不然就無法順利執行，下方是可以正確執行的寫法：

@media all {...}
@media print {...}
@media screen {...}

@media all and (max-width:200px) {...}     /* 後方可串接條件語句 */
@media print and (max-width:200px)  {...}  /* 後方可串接條件語句 */
@media screen and (max-width:200px)  {...} /* 後方可串接條件語句 */

@media (max-width:200px), all {...}        /* 逗號後的開頭也可以 */
@media (max-width:200px), print {...}      /* 逗號後的開頭也可以 */
@media (max-width:200px), screen {...}     /* 逗號後的開頭也可以 */

下方寫法為「錯誤」寫法，無法正確執行：

@media (max-width:200px) and all {...}   
@media (max-width:200px) and print  {...}
@media (max-width:200px) and screen  {...}

媒體特色 ( Media Features )

了解媒體類型後，會搭配一些「媒體特色 ( Media Features )」進行更進階的邏輯判斷，下方列出主要的媒體特色 ( 詳細參考 W3C Media Features )

視窗或頁面尺寸 ( Viewport/Page Dimensions )

Feature	數值	說明
width max-width min-width	長度單位數值	螢幕寬度
height max-height min-height	長度單位數值	螢幕高度
aspect-ratio min-aspect-ratio max-aspect-ratio	寬/高 ( 無單位 )	螢幕寬高比
orientation	landscape ( 橫 )、portrait ( 直 )	裝置方向。
device-width min-device-width max-device-width	長度單位數值	裝置螢幕寬度
device-height min-device-height max-device-height	長度單位數值	裝置螢幕高度
overflow-block	none、scroll ( 滾動查看超出內容 )、paged ( 分頁顯示超出內容 )	內容超出區塊容器
overflow-inline	none、scroll ( 滾動查看超出內容 )	內容超出行內容器

顯示品質 ( Display Quality )

Feature	數值	說明
resolution max-resolution min-resolution	多少 dpi、多少 ppx 等	解析度
scan	interlace ( 交錯式掃描 )、progressive ( 漸進式掃描 )	電視掃描方式
update	none ( 不會更新，例如印刷品 )、slow ( 更新慢 )、fast ( 更新快，例如電腦螢幕 )	媒體更新速度
grid	0 ( 點陣 )、1 ( 網格 )	網格媒體

顏色 ( Color Quality )

Feature	數值	說明
color max-color min-color	0 ( 黑白裝置 )、2 ( 2bit )、8 ( 8bit ) 等	輸出裝置的色彩位元數
color-index max-color-index min-color-index	32、64、256 等	輸出裝置的色彩索引位元數
monochrome	0 ( 非色設備 )	單色媒體功能
color-gamut	srgb、p3、rec2020	輸出裝置的色域
dynamic-range	standard、high	輸出裝置的亮度、對比和色彩

互動 ( Interaction Quality )

Feature	數值	說明
pointer、any-pointer	none ( 沒有指標 )、coarse ( 指標精度較差，例如觸控螢幕 ) 和 fine ( 指標精度較高，例如滑鼠 )	裝置的指標準確性
hover、any-hover	none、hover	裝置具備 hover 的能力

媒體查詢條件語法

使用 Media Queries 時，除了基本的寫法，還有另外四種條件語法，分別是* OR、AND、NOT 和 ONLY，撰寫時前後條件使用「小括號 ()」包覆，當中的判斷條件只能使用「:」賦予精確數值，不能使用大於小於等其他符號*，此外 NOT 和 ONLY 必須擺在開頭，相關語法如下：

<link rel="stylesheet" type="text/css" media="( 條件 ) , ( 條件 ) {...}" href="style.css"> <!-- OR 條件語法 -->
<link rel="stylesheet" type="text/css" media="( 條件 ) and ( 條件 ) {...}" href="print.css"> <!-- AND 條件語法 -->
<link rel="stylesheet" type="text/css" media="not ( 條件 ) {...}" href="style.css"> <!-- NOT 條件語法 -->
<link rel="stylesheet" type="text/css" media="only ( 條件 ) {...}" href="style.css"> <!-- ONLY 條件語法 -->

@media ( 條件 ) , ( 條件 ) {...}    /* OR 條件語法 */
@media ( 條件 ) and ( 條件 ) {...}  /* AND 條件語法 */
@media not ( 條件 ) {...}  /* NOT 條件語法 */
@media only ( 條件 ) {...} /* ONLY 條件語法 */

@import "print.css" ( 條件 ) , ( 條件 ) {...};     /* OR 條件語法 */
@import "print.css" ( 條件 ) and ( 條件 ) {...};   /* AND 條件語法 */
@import "print.css" not ( 條件 ) {...};   /* NOT 條件語法 */
@import "print.css" only ( 條件 ) {...};  /* ONLY 條件語法 */

下方列出這四種條件語法的說明：

OR

OR 表示「或者」，使用逗號「,」表示，只要前後的條件中有一格符合就會套用相關樣式，例如下方範例，螢幕尺存小於等於 300px 或印刷時，字體會變成紅色 50px，反之就是黑色預設字體大小。

線上展示：https://codepen.io/oxxo/pen/JoPKrZo
```

<h1>hello oxxo</h1>


<style>
  @media (max-width:300px),print {
    h1 {
      color: red;
      font-size: 50px;
    }
  }
</style>
```
AND

AND 表示「或者」，使用英文「and」表示，需要前後的條件同時滿足才會套用相關樣式，例如下方範例，螢幕尺寸必須介於 200px～300px，且是螢幕相關類型時字體會變成紅色 50px，反之就是黑色預設字體大小。

線上展示：https://codepen.io/oxxo/pen/vEBKery
```

<h1>hello oxxo</h1>


<style>
  @media screen and (min-width:200px) and (max-width:300px) {
    h1 {
      color: red;
      font-size: 50px;
    }
  }
</style>
```
AND 和 OR 可以互相搭配使用，下方範例除了「螢幕」大小介於「200px~～00px」之間時，字體會是紅色 50px，橫向印刷也會是紅色 50px 的字體。( 可從預覽列印網頁中選擇橫向列印看結果 )

線上展示：https://codepen.io/oxxo/pen/ByBzwVm
```

<h1>hello oxxo</h1>


<style>
  @media screen and (min-width:200px) and (max-width:300px), print and (orientation: landscape) {
    h1 {
      color: red;
      font-size: 50px;
    }
  }
</style>
```

NOT

NOT 使用英文「not」表示，表示「排除」某種特定條件才能套用某些樣式，必須擺放在 Media Queries 的字首且針對「screen 和 print」使用 ( 不然就沒有作用 )，由於大多數情況只需要 AND 和 OR，這個條件語法也越來越少見，下方範例執行後，除了彩色螢幕之外的裝置，都會套用 example.css。
```
<link rel="stylesheet" media="not screen and (color)" href="example.css" />
```
NOT 可以搭配 OR 和 AND 共同使用，下方範例執行後，只有印刷時為橫向，才會出現紅色 50px 的字體。

線上展示：https://codepen.io/oxxo/pen/jENrGKp
```

<h1>hello oxxo</h1>


<style>
  @media not screen, print and (orientation: landscape) {
    h1 {
      color: red;
      font-size: 50px;
    }
  }
</style>
```

ONLY

ONLY 使用英文「only」表示，表示「只有」某種特定條件才能套用某些樣式，必須擺放在 Media Queries 的字首且針對「screen 和 print」使用 ( 不然就沒有作用 )，由於大多數情況只需要 AND 和 OR，且針對裝置套用 CSS 情況越來越少，這個條件語法也越來越少見 ( W3C 也只提供下方一行程式碼 )。
```
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
```

透過 Media Queries 製作響應式網頁 ( RWD )

因為響應式網頁 ( RWD ) 必須要在「不同寬度」或「不同比例」的裝置中顯示網頁，所以 @media 大多都是作為處理響應式網頁使用，下方範例會呈現頁面寬度在 200px～500px，使用 max-width 所表現的不同樣式。

線上展示：https://codepen.io/oxxo/pen/zxOBEag

<!-- HTML 程式碼 -->
<h1>Hello OXXO!!</h1>

<!-- CSS 程式碼 -->
<style>
  /* 螢幕時 */
  @media screen {
    h1{
      font-size:60px;
      color: gray;
    }
  }
  /* 頁面最大寬度小於 500px */
  @media (max-width:500px) {
    h1{
      font-size:50px;
      color: blue;
    }
  }
  /* 頁面最大寬度小於 400px */
  @media (max-width:400px) {
    h1{
      font-size:40px;
      color: green;
    }
  }
  /* 頁面最大寬度小於 300px */
  @media (max-width:300px) {
    h1{
      font-size:30px;
      color: black;
    }
  }
  /* 頁面最大寬度小於 200px */
  @media (max-width:200px) {
    h1{
      font-size:20px;
      color: red;
    }
  }
</style>

CSS 教學 - CSS @media 媒體查詢 ( Media Queries ) - 透過 Media Queries 製作響應式網頁 ( RWD )

使用 @media 也需要遵循 CSS 的「權重」規則，後方的 @media 會在條件判斷相同時，覆蓋前方的 @media，如果將上方範例中的 @media screen 放到最後方，則前方所有的 @media 都會被覆蓋而不呈現樣式。

線上展示：https://codepen.io/oxxo/pen/qEWNPyO

<!-- HTML 程式碼 -->
<h1>Hello OXXO!!</h1>

<!-- CSS 程式碼 -->
<style>
  @media (max-width:500px) {
    h1{
      font-size:50px;
      color: blue;
    }
  }
  @media (max-width:400px) {
    h1{
      font-size:40px;
      color: green;
    }
  }
  @media (max-width:300px) {
    h1{
      font-size:30px;
      color: black;
    }
  }
  @media (max-width:200px) {
    h1{
      font-size:20px;
      color: red;
    }
  }
  /* 移動到最後方 */
  @media screen {
    h1{
      font-size:60px;
      color: gray;
    }
  }
</style>

CSS 教學 - CSS @media 媒體查詢 ( Media Queries ) - Media Queries 遵守權重規範

因為權重的緣故，如果將上方範例改成 min-width，寬度的排列順序就必須改成「小到大」，才不會因為權重覆蓋導致無法套用樣式。

線上展示：https://codepen.io/oxxo/pen/VYZjMBK

<!-- HTML 程式碼 -->
<h1>Hello OXXO!!</h1>

<!-- CSS 程式碼 -->
<style>
  /* 小於 200px 時 */
  @media screen {
    h1{
      font-size:60px;
      color: gray;
    }
  }
  /* 最小寬度 200px */
  @media (min-width:200px) {
    h1{
      font-size:20px;
      color: red;
    }
  }
  /* 最小寬度 300px */
  @media (min-width:300px) {
    h1{
      font-size:30px;
      color: black;
    }
  }
  /* 最小寬度 400px */
  @media (min-width:400px) {
    h1{
      font-size:40px;
      color: green;
    }
  }
  /* 最小寬度 500px */
  @media (min-width:500px) {
    h1{
      font-size:50px;
      color: blue;
    }
  }
</style>

CSS 教學 - CSS @media 媒體查詢 ( Media Queries ) - min-width 和 max-width 順序相反

小結

@media 媒體查詢是進行響應式網頁開發時，不可或缺的重要技巧，如果自己的網頁還沒有使用響應式網頁，不妨趕快透過 @media，讓不同的裝置都能順利地瀏覽網頁。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

CSS @media 媒體查詢 ( Media Queries )

認識與使用 @media

媒體類型 ( Media Types )

媒體特色 ( Media Features )

媒體查詢條件語法

透過 Media Queries 製作響應式網頁 ( RWD )

小結

意見回饋

CSS 教學

基本介紹

CSS 選擇器

數值與單位

規則與定義

函式類型

顏色與濾鏡

文字與段落

元素容器

背景與陰影

清單與表格

基本排版與定位

Flexbox 彈性排版

Grid 網格排版

轉場與動畫

變形、裁切與遮罩

視窗與使用者行為

範例效果