前端工程師學習Media Query的路上有我罩之插入字條件

前端工程師學習Media Query的路上有我罩之插入字條件

前端工程師學習Media Query的路上有我罩之插入字條件

 

前端工程師的Media Query課程中,學習插入and.or.not和only的條件判斷是一定要的!

 


【前文提要】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教學系列文章目錄

 

  1. 前端工程師的基礎RWD教學(一)RWD基礎概念
  2. 前端工程師的基礎RWD教學(二)流動布局Fluid Grid
  3. 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法
  4. 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型
  5. 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件
  6. 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上
  7. 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下
  8. 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image

 

 

延伸閱讀好精彩:

RWD是啥?前端工程師用三面相讓你秒懂(三)媒體查詢

前端工程師學習Media Query的路上有我罩之媒體類型

前端工程師學習Media Query的路上有我罩之流動圖片

從零開始,Python課程帶你成為進擊的IT巨人!

與世界同步前進的程式語言Python課程,你絕不能錯過!

前端工程師一定要知道!! Class和ID有什麼不同?

中國IT教育領導品牌 達內教育集團第一家海外授權中心

本篇發表於 前端工程師教學 並標籤為 , , , , , , , , , 。將永久鏈結加入書籤。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料