CSS3多媒体查询

CSS3多媒体查询

这次我们来讲一下多媒体查询，刚刚接触多媒体查询的时候，就会冒出一些什么是多媒体查询，多媒体查询有什么作用，多媒体又该怎么用？

其实我们学习新知识的时候，无非就是要知道新知识是什么，有什么作用，应该怎么样去使用。而现在，我们就是来了解多媒体查询的。

媒体查询，是一种CSS语法。可以根据浏览器的特性，一般是屏幕或浏览器宽度提供CSS规则。我们给不同的媒体类型，要设置不同的CSS样式规则。就是针对不同的媒体类型（例如手机，平板，电脑，显示器，电视机等等）设置不同的CSS样式规则。

话说回来，我们为什么要设置不同的CSS样式规则呐。用统一的CSS样式规则不好吗？当然不是啦…很多时候，我们在自己的设备上看，样式可以非常漂亮，但在别人的设备上看，可能又不一样，有一些多媒体类型在设备上还不能实现统一显示效果，这样一来，可能在别人设备里你的页面显示效果非常的丑。

这怎么办呐，于是就出现了一个网站能兼容多个终端而不是为每个终点做一个特定的版本，这样就可以解决移动互联网浏览问题。@media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。CSS3强化了CSS2.1的媒体类型支持，增加了media query功能，这种机制允许设计者在css样式中添加media query 表达式，这种表达式不仅可以对媒体类型进行匹配，也可以对媒体分辨率、色深等各种细节进行匹配，因此可以针对不同类型、不同参数细节的媒体设备提供精确的控制。

多媒体查询语法

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@media notlonly
mediatype and (expressions) {

CSS-Code;

}

media query语法格式中的设备类型如下：

现在我们来实验一下，输入如下代码：

当浏览器窗口宽度大于 576px时，背景颜色会变粉红色，浏览器窗口宽度大于 768px时，背景颜色会变蓝色，浏览器窗口宽度大于 992px时，背景颜色会变紫色。浏览器的结果我就不显示给大家了，因为浏览器效果要截三四张图，所有我就不浪费大家的流量了，大家感兴趣的话，可以自己去实验一下，记得实验的时候，把浏览器的屏幕大小设为100%，不要放大或者缩小，这样会数据混乱的。刚刚开始我没注意到这点，一直不知道哪里出错呐。大家一定要记住哇…