一、媒體查詢

繼承了 CSS2 多媒體型別的所有思想： 取代了查詢裝置的型別，CSS3 根據設定自適應顯示。

媒體查詢可用於檢測很多事情，例如：

• viewport(視窗) 的寬度與高度
• 裝置的寬度與高度
• 朝向 (智慧手機橫屏，豎屏) 。
• 解析度

目前很多針對蘋果手機，Android 手機，平板等裝置都會使用到多媒體查詢。

二、媒體型別：mediatype

媒體型別(Media Types)允許你定義以何種媒介來提交文件。文件可以被顯示在顯示器、紙媒介或者聽覺瀏覽器等等。

一些 CSS 屬性只設計了某些媒體。例如 voice-family 屬性是專為聽覺使用者代理。其他一些屬性可用於不同的媒體型別。例如， font-
size

• all ：用於所有多媒體型別裝置
• print ：用於印表機
• screen ：用於電腦螢幕，平板，智慧手機等。(預設)
• speech ：用於螢幕閱讀器

三、媒體查詢語法

媒體查詢由多種媒體組成，可以包含一個或多個表示式，表示式根據條件是否成立返回 true 或 false。

    @media not|only mediatype and (expressions) {
        CSS 程式碼...;
    }
 

如果指定的多媒體型別匹配裝置型別則查詢結果返回 true，文件會在匹配的裝置上顯示指定樣式效果。

除非你使用了 not 或 only 操作符，否則所有的樣式會適應在所有裝置上顯示效果。

• not: not是用來排除掉某些特定的裝置的，比如 @media not print（非列印裝置）。

• only: 用來定某種特別的媒體型別。
  對於支援Media Queries的移動裝置來說，如果存在only關鍵字，移動裝置的Web瀏覽器會忽略only關鍵字並直接根據後面的表示式應用樣式檔案。
  對於不支援Media Queries的裝置但能夠讀取Media Type型別的Web瀏覽器，遇到only關鍵字時會忽略這個樣式檔案。

• all: 所有裝置，這個應該經常看到。

四、媒體查詢例項

使用多媒體查詢可以在指定的裝置上使用對應的樣式替代原有的樣式。

1、@media 規則允許在相同樣式表為不同媒體設定不同的樣式。

在下面的例子告訴我們瀏覽器螢幕上顯示一個 14 畫素的 Verdana 字型樣式。但是如果頁面列印，將是 10 個畫素的 Times
字型。請注意，font-weight 在螢幕上和紙上設定為粗體：

    @media screen
    {
        p.test {font-family:verdana,sans-serif;font-size:14px;}
    }
    @media print
    {
        p.test {font-family:times,serif;font-size:10px;}
    }
    @media screen,print
    {
        p.test {font-weight:bold;}
    }

嘗試一下 »

你也可以在不同的媒體上使用不同的樣式檔案：

外部樣式

    <link rel="stylesheet" media="print" href="print.css">

內部樣式：

    <style type="text/css">
     h1 {color:#FF0000;}
     p {color:#0000FF;}
     body {background-color:#FFEFD6;}
    </style>
    
    <style type="text/css" media="print">
     h1 {color:#000000;}
     p {color:#000000;}
     body {background-color:#FFFFFF;}
    </style>

2、以下例項在螢幕可視視窗尺寸大於 480 畫素時將選單浮動到頁面左側：

    @media screen and (min-width: 480px) {
        #leftsidebar {width: 200px; float: left;}
        #main {margin-left:216px;}
    }

嘗試一下 »

3、CSS 多媒體查詢，適配各種裝置尺寸

    .example {
        padding: 20px;
        color: white;
    }
    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {
        .example {background: red;}
    }
    
    /* Small devices (portrait tablets and large phones, 600px and up) */
    @media only screen and (min-width: 600px) {
        .example {background: green;}
    }
    
    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {
        .example {background: blue;}
    } 
    
    /* Large devices (laptops/desktops, 992px and up) */
    @media only screen and (min-width: 992px) {
        .example {background: orange;}
    } 
    
    /* Extra large devices (large laptops and desktops, 1200px and up) */
    @media only screen and (min-width: 1200px) {
        .example {background: pink;}
    }

4、在一個網頁的側欄上使用郵件列表連結

    /* 520 到 699px 寬度 - 新增郵箱圖示
     大於 1151px 寬度 - 新增圖示
     我們沒有編寫額外的查詢塊，我們可以在已有的查詢媒體後使用逗號分隔來新增其他媒體查詢 (類似 OR 操作符): */ 
    @media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
        #nav li a {
            padding-left: 30px;
            background: url(email-icon.png) left center no-repeat;
        }
    }
    
    /* 700 到 1000px - 新增文字字首資訊 */ 
    @media screen and (max-width: 1000px) and (min-width: 700px) {
        #nav li a:before {
            content: "Email: ";
            font-style: italic;
            color: #666666;
        }
    }
    
    /*  大於 1001px 寬度 - 新增郵件地址 */ 
    @media screen and (min-width: 1001px) {
        #nav li a:after {
            content: " (" attr(data-email) ")";
            font-size: 12px;
            font-style: italic;
            color: #666666;
        }
    }

嘗試一下 »