前端工程師之路不停歇~Media Query的CSS插入字條件 @ 布萊恩的創業小窩的部落格

前端工程師之路不停歇~Media Query的CSS插入字條件

前端工程師來說應該都要知道media query的CSS在不同情況會插入以下不同的字,快緊接著看介紹!

【前文提要】RWD 網頁設計必備語法：Media Query

前端工程師在製作 RWD 響應式網頁時，一定會用到的 CSS 語法就是 Media Query。簡單來說，我們可以把 Media 視為 CSS 的擴充元件，會比較好理解，而 Media 後面多加一個「Query」代表做網頁設計時，網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (Media Type)，再針對這些類型 (Media Type) 定義其樣式 (Media Feature)，而這個樣式就是所謂的「Media Feature (中文譯作「媒體樣式」或是「媒體特徵」)」。

參考文章：如何在RWD網頁中套用Media Query語法

而 Media Query 的語法包含了三個部分：媒體類型 (Media Type)、and/not/only 判斷條件與媒體特徵 (Media Features)。「媒體類型 (Media Type)」已在本系列的前篇文章做說明，而媒體特徵 (Media Feature) 的各式屬性也於此篇（頁面尺寸與顯示品質的屬性）與此篇（「顏色類」和「互動類」的屬性）列出。

本篇就針對「and/not/only 等 Media Query 的判斷條件做說明如下：

Media Query 語法可加入：and、or、not 和 only，而這篇主要為您整理相關的條件，教您如何判斷。

分別介紹如下：

Media Query 之 and 使用方法

1. 當單一條件成立時

範例：如果螢幕寬度超過 600px 以上時，就套用此份 css 設定

@media screen and (min-width:600px) { 
  CSS設定
}

2. 同時符合兩種條件

範例：如果螢幕寬度介於 600 px ~ 800 px 時，就套用此份 css 設定

@media screen and (min-width:600px) and (max-width:800px) { 
  CSS設定
}

3. 兩者條件擇一即可 (與「or」連用)

若兩種條件當中，符合一種即可套用此份 css 設定。這種兩者條件擇一即可的「or」條件式，需配合「,」使用：

範例：如果螢幕裝置寬度小於 700px，「或」是直立的話，即可套用此份 css 設定：

@media screen and (max-width: 700px), (orientation: portrait) { 
  CSS設定
}

Media Query 之 not 使用方法

not 是用來排除某些設備的樣式，假使你希望這個樣式只在裝置 A 有作用，不希望在裝置 B 上起作用，就可以使用 not。

範例：「除了」螢幕裝置寬度小於 300px 「之外」，橫向印刷時都套用此份 css 設定：

@media not screen and (max-width:300px), print and (orientation: landscape){
  CSS設定
}

Media Query 之 only 使用方法

only 可以指定「只有」某種裝置才能套用某些樣式，會寫在 media query 的字首。目前因為使用舊版裝置的人越來越少，所以使用 only 的寫法越來越少見，直接採用 and 或 or 的寫法就能夠符合大多數的狀況。

下面的範例代表只有在「彩色螢幕」時才會套用 sample.css：

<link rel="stylesheet" media="only screen and (color)" href="sample.css" />

其實以上的範例也可以換成用「and」的寫法如下：

<link rel="stylesheet" media="screen and (color)" href="sample.css" />

Media Query 之 or 使用方法

or（或）就是在「多種條件當中只要符合一項就成立」的場合使用。請注意，在語法中，or 的寫法不直接寫「or」而是以逗號「,」呈現。

範例：螢幕裝置若為直立「或」是寬度小於 380px 時，字體會變成藍色的 60px。

 p{
      font-size:30px;
  }
  @media (orientation: portrait), (max-width:380px){
      p{
          font-size:60px;
          color:blue;
      }
  }

本篇為「前端工程師的基礎RWD教學」系列文章第五篇，全系列文章如下:

前端工程師的基礎RWD教學系列文章目錄