CSS Media Queries 詳細介紹

在製作 RWD 響應式網頁時，一定會用到的 CSS 語法就是 media，代表的就是針對指定的「媒體」設定樣式，這篇將會對 CSS 的 Media Queries 做個詳細介紹，也幫助自己未來撰寫時，更有個方向與參考。

CSS Media Queries 是什麼？

Media Queries 代表網頁會先「詢問 query」「媒體 media」的屬性，再針對這些屬性定義樣式，通常在 CSS 裡並沒有大多都是權重大小「覆蓋」的方式，但 media 本身卻帶有些「邏輯」的概念，透過邏輯的寫法，如果媒體條件符合為 true，就會套用樣式，反之為 false 就不會套用樣式。

如果要使用 media queries，共有下列三種使用方式：

• 在 HTML 內使用

  如果在 html 裡加入下面的程式碼，在視窗 screen 時會使用 style.css，列印時則使用 print.css。

  <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 screen{
    樣式...
  }
  @media print{
    樣式...
  }
  

• 使用@import

  如果你喜歡使用@import，也可以根據不同的 media 特性，import 不同的 css。

  @import "style.css";
  @import "print.css" print;
  

Media 的類型 ( Media Types )

在 CSS Level 4 普及後 ( 沒錯，寫這篇文章時，Level 4 即將是主流了 )，主要的 Media 類型有以下四種。( tty、tv、projection、handheld、braille、embossed 和 aural 因為在 Level 4 已經描述未來不支援，就不再多做介紹。)

Media 的特徵 ( Media Fratures )

Media 類型是大方向，那麼特徵 Feature 就是小分類，可以做到更細微的判斷與設定，跟類型不同的是，Feature 必須要使用括號( )包覆，甚至可以和邏輯關鍵字結合，此外，如果具備 Range 性質的 Feature，也可在開頭加上min-或max-的標示，以下將特徵作為幾個大分類。( device-width、device-height、device-aspect-ratio、handheld、braille、embossed 和 aural 因為在 Level 4 已經描述未來不支援，就不再多做介紹。)

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

顯示品質 ( Display Quality )

顏色 ( Color )

互動 ( Interaction )

CSS Media Queries 應用實例

Queries 有四種使用方式，分別是 or、and、not 和 only，除了 or 使用逗號「,」表現，其他的就直接寫出英文字，下列應用實例分別使用這四種方式來表現。

• OR

  OR「或者」這個概念很容易理解，例如：螢幕尺存小於等於 400px 「或」印刷時，字體會變成紅色 100px，反之就是黑色 30px。( 打開範例頁面，點擊滑鼠右鍵按印刷，就能看到效果 )

  CSS Media Queries 應用實例 1：OR

    h1{
        font-size:30px;
    }
    @media (max-width:400px), print{
        h1{
            font-size:100px;
            color:red;
        }
    }
  

  另外一個例子，透過 orientation 判斷裝置是直立或橫放，如果裝置是直立「或」寬度小於 200px，就讓文字變成紅色 50px。

  CSS Media Queries 應用實例 2：OR

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

• AND

  使用 AND 必須要所有條件皆滿足，下面的例子在「螢幕」大小介於「200px~300px」之間時，字體會是紅色 50px。( 從這個例子可以很明顯觀察到，type 不用加上括號，而 features 要用括號包覆 )

  CSS Media Queries 應用實例 3：AND

    h1{
        font-size:30px;
    }
    @media screen and (min-width:200px) and (max-width:300px){
        h1{
            font-size:50px;
            color:red;
        }
    }
  

  AND 和 OR 也可以互相搭配使用，已下面的例子來說，除了「螢幕」大小介於「200px~300px」之間時，字體會是紅色 50px，橫向印刷也會是紅色 50px 的字體。( 可列印網頁，選擇橫向列印看結果 )

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

• ONLY

  ONLY 可以指定「只有」某種裝置媒體才能套用某些樣式，會寫在 media query 的字首，目前這種撰寫方式越來越少見，最主要是因為使用舊版裝置媒體的人越來越少，因此直接採用 AND 或 OR 的寫法就能夠符合絕大多數的需求。在 CSS Level 4 的眾多範例裡，也只出現了下方這個短短一行代碼範例，可見有多不常用，下面這行代表只有在「彩色螢幕」才會套用 example.css。

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

  其實上面這行也可寫成這樣，也是一樣的結果。

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

• NOT

  NOT 的目的在於排除一些裝置媒體，會寫在 media query 的字首，下方的例子就是除了彩色螢幕之外的裝置，都套用 example.css，這裡要注意一下，NOT 和 ONLY 後方都必須先接 media type ( 像是 screen 或 print )，不然會沒有作用。

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

  NOT 可以使用逗號分隔，就能做出不同的判斷，下方的例子，除了螢幕寬度小於等於 300px，或印刷時為橫向，才會出現紅色 50px 的字體。

    h1{
        font-size:30px;
    }
    @media not screen and (max-width:300px), print and (orientation: landscape){
        h1{
            font-size:50px;
            color:red;
        }
    }
  

小結

其實 CSS Media Queries 並沒有很複雜，尤其在現在電腦或手機螢幕發達的時代，大多情況只需要注意 max-width、min-width 就能解決，其他充其量就是注意印刷的樣式、注意單色的螢幕...等特殊情況而已，總而言之，善用 Media Queries 對於撰寫一個 RWD 網頁，是絕對必要的技能呦！