媒體查詢

媒體查詢規則：

@media all{}将樣式應用于所有類型，

@media(min-width:800px){}将樣式應用于最小寬度為800的

@media(min-width:800px) and (max-width:1200px) and (orientation:potrait){}寬度為800-1200且方向是縱向（and 表示同時滿足時才會顯示，or隻要滿足其中一個條件即可）

@media(not min-width:800px){}

orientation

 媒體查詢

@media (orientation:portrait) { ... }      

高度和寬度行為十分相似，都支援以 

min-

 和 

max-

 為字首。清單 9 展示了一個有效的媒體查詢。

高度和寬度媒體查詢

@media (min-width:800px) and (min-height:400px) { ... }      

如果沒有 

min-

 或 

max-

 字首，您還可以使用 

width

height

 媒體特性，如清單 10 所示。

不帶 

min-

max-

 字首

@media (width:800px) and (height:400px) { ... }      

當螢幕正好是 800 像素寬、400 像素高時，可以使用清單 10 中的媒體查詢。現實中，像這樣的媒體查詢可能過于具體而不太有用。檢測精确次元是大多數網站通路者都不可能遇到的一個場景。通常情況下，響應式設計會使用範圍來執行螢幕檢測。

作為媒體查詢大小範圍的後續内容，下一節将讨論一些常見的媒體查詢，在設計一個響應式網站時，您可能會發現它們非常有用。

常見媒體查詢

因為 Apple 首次向市場推出了使用者智能手機和平闆電腦産品，是以下列大多數媒體查詢都是基于這些型号的裝置。

如果目标是橫向模式智能手機，則使用： 

@media (min-width: 321px) { ... }

如果目标是縱向模式智能手機，則使用： 

@media (max-width: 320px) { ... }

如果目标是橫向模式 Apple iPad，則使用： 

@media (orientation: landscape) { ... }

如果目标是縱向模式 iPad，則使用： 

@media (orientation: portrait) { ... }

嵌套的媒體查詢

#header {
  width: 400px;
  @media (min-width: 800px) {
    width: 100%;
  }
}      

編譯結果

#header {
  width: 400px;
}
@media (min-width: 800px) {
  #header {
    width: 100%;
  }
}