@media媒体查询

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等。