CSS3媒體查詢

1.定義和使用

使用 @media 查詢，你可以針對不同的媒體型別定義不同的樣式。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

@media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。

2.@media與@media screen區別

@media screen的css在列印裝置裡是無效的，而@media在列印裝置裡是有效的，如果css需要用在列印裝置裡，那麼就用@media ，否則，就用@media screen。

不過這只是籠統的做法，其實如果把“screen”換為“print”，寫為@media print，那麼該css就可用到列印裝置上了，但要注意，@media print宣告的css只能在列印裝置上有效

3.Media Queries工作方式:

在media屬性裡：
screen 只是媒體型別裡的一種，其中常用的有：
（1）all——用於所有裝置   （2）print —— 用於印表機和列印預覽  （3）screen——用於電腦螢幕，平板電腦，智慧手機等。 （4）speech——應用於螢幕閱讀器等發聲裝置
and 被稱為關鍵字，其他關鍵字還包括 not(排除某種裝置)，only(限定某種裝置)
(min-width: 400px) 就是媒體特性，其被放置在一對圓括號中。完整的特性參看 相關的Media features部分

3.1 直接在link中判斷裝置的尺寸，然後引用不同的css檔案

當螢幕的寬度大於等於400px的時候，應用 A.css

當螢幕的寬度大於600小於800px時，應用B.css

3.2 另一種方式，即是直接寫在 style 標籤裡或css檔案中

@media screen and (max-width: 600px) { /*當螢幕尺寸小於600px時，應用下面的CSS樣式*/
  body {    background: #ccc;
  }
}

4.Media使用說明舉例

4.1前端響應式佈局最出名的框架莫過於 Bootstrap

1.png

@media (min-width: @screen-lg-min) { ... }

4.2自適應程式碼

@media (min-width: 768px){ //>=768的裝置 }
@media (min-width: 992px){ //>=992的裝置 }
@media (min-width: 1200){ //>=1200的裝置 }

注意下順序，如果你把@media (min-width: 768px)寫在了下面那麼就是錯誤的！因為如果是1440,由於1440>768那麼你的1200就會失效。

• 劃重點
  用min-width時，小的放上面大的在下面，同理如果是用max-width那麼就是大的在上面，小的在下面

4.3在媒體查詢程式碼中包含 max-width 從而將 CSS 的影響限制在更小範圍的螢幕大小之內

@media screen and (min-width:1200px){}
@media screen and (min-width: 960px) and (max-width: 1199px) {  }
@media screen and (min-width: 768px) and (max-width: 959px) {  }
@media only screen and (min-width: 480px) and (max-width: 767px){  }
@media only screen and (max-width: 479px) {  }

參考

作者：pattyzzh
連結：