建議學習時長： 30分鐘
學習方式：深入

學習目標

• 了解什么時候用媒體查詢
• 知道媒體查詢怎么寫

詳細介紹

CSS媒體查詢允許我們根據(jù)設備的特性來應用不同的樣式申明。如，我們可以讓 768px 寬度的設備(ipad) 及以上屏幕內(nèi)容顯示4列，768px 以下的顯示 1列。

語法

以@media開頭來表示這是一條媒體查詢語句。@media后面的是一個或者多個表達式，如果表達式為真，則應用樣式。如

@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}

上面的代碼在屏幕寬度小于 600px 的時候，會作用大括號里的內(nèi)容。

媒體查詢可以在 link標簽上加media屬性或css文件中使用。

<!-- link元素中的CSS媒體查詢 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 樣式表中的CSS媒體查詢 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

媒體查詢語句結構

由媒體類型 +一到多個CSS屬性判斷組成，而多個CSS屬性判斷可以用關鍵字and連接。媒體類型是可選的，默認是全部（all）。

@media screen and (min-width:1024px) and (max-width:1280px) and (animation){
  body{font-size:medium;}
}

max與min

他們是要配合支持它們的屬性使用的,如：

@media (min-width:1000px) and (min-device-width:1500px){
  body{font-size:medium;}
}

邏輯操作符

操作符 not，and 和 only 可以用來構建復雜的媒體查詢。
and 操作符用來把多個 媒體屬性 組合起來，合并到同一條媒體查詢中。只有當每個屬性都為
真時，這條查詢的結果才為真。
not 操作符用來對一條媒體查詢的結果進行取反。
only 操作符表示僅在媒體查詢匹配成功的情況下應用指定樣式?？梢酝ㄟ^它讓選中的樣式在老式瀏覽器中不被應用。
注意：若使用了 not 或 only 操作符，必須明確指定一個媒體類
型。

media query支持的屬性

webkit瀏覽器對media query支持的屬性

常見的有

• transform-2d 只用于支持使用 -webkit-transform實現(xiàn)2D變換的瀏覽器
• transform-3d 只用于支持使用 -webkit-transform實現(xiàn)3D變換的瀏覽器
• transition 只用于支持使用-webkit-transition實現(xiàn)變換效果的瀏覽器
• animation 只用于支持使用-webkit-animation實現(xiàn)動畫的瀏覽器

媒體類型(media type)列表

• all 所有設備
• braille 盲文
• embossed 盲文打印
• handheld 手持設備
• print 文檔打印或打印預覽模式
• projection 項目演示，比如幻燈
• screen 彩色電腦屏幕
• speech 演講
• tty 固定字母間距的網(wǎng)格的媒體，比如電傳打字機
• tv 電視

實例

android手機的多分辨率問題

android系統(tǒng)的開放性導致其終端的多樣性，那么對于各種各樣的android手機來說，屏幕分辨率的差異導致針對android手機的頁面重構復雜性增加，那么我們可以用media query為每種分辨率提供特定樣式：

/* for 240 px width screen */
@media only screen and (max-device-width:240px){
    selector{
    }
}

/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
    selector{
    }
}

/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
    selector{
    }
}

device-aspect-ratio

device-aspect-ratio可以用來適配特定屏幕長寬比的設備，這也是一個很有用的屬性，比如，我們的頁面想要對長寬比為4:3的普通屏幕定義一種樣式，然后對于16:9和16:10的寬屏，定義另一種樣式，比如自適應寬度和固定寬度：

/* for 4:3 screen */
@media only screen and (device-aspect-ratio:4/3){
    selector{
    }
}

/* for 16:9 and 16:10 screen */
@media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){
    selector{
    }
}