CSS3 媒體查詢

當頁面可是區域小于960px時，執行里面的css代碼

@media (max-width:960px){

  background:red;

}

但是，有時候我們會遇到下面的情況，在上述代碼的基礎上，多了一個screen，如下面的代碼：

@media screen and (max-width:960px){

  background:red;

}

這里的screen的作用是：告知設備在打印頁面時使用襯線字體，在顯示頁面時使用無襯線字體。

上面的代碼實現的是小于屏幕寬度（例如：960px）時顯示的css樣式，那么，怎么實現屏幕寬度等于960px時顯示的css樣式呢？你可以使用下面的代碼：

@media (max-device-width:960px){

  background:red;

}

當然，我們也可以混合使用上面的方法：

@media screen and (min-width:960px) and (max-width:1200px){

  background:blue;

}

以上就是我們最常用的媒體查詢器的三大特性：大于、等于、小于的寫法。當然媒體查詢器的功能還有更多......。注：媒體查詢的條件有很多，如：width、height、color、device-width、device-height等。