前端工程師課程再進化-Media Query的CSS插入字條件

各種前端工程師一定都要學的media query技巧,今天教你這些插入字要什麼時候插入!

【前文提要】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教學系列文章目錄 前端工程師的基礎RWD教學(一)RWD基礎概念 前端工程師的基礎RWD教學(二)流動布局Fluid Grid 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image

🔑不要錯過延伸閱讀：

靠這三技能,前端工程師向"不專業"說再見~(3)媒體查詢

前端工程師課程再進化-Media Query的媒體類型

前端工程師課程再進化-Media Query的流動圖片

想自已設計App程式,來上UI課程教成為UI設計師

邀你認識「KISS 原則」神奇的網路行銷課程

複製貼上快速搞定!給前端工程師的十六進位代碼常用顏色表!

人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？