没有CSS3的媒体查询模块，就不能针对设备特性（如视口宽度）设置特定的CSS样式。

如果你仔细研读W3C关于CSS3媒体查询模块的规范，就会看到媒体查询的官方解释：HTML4和CSS2目前支持为不同的媒体类型设定专有的样式表。

比如，一个页面在屏幕上显示时使用无衬线字体，而在打印时则使用衬线字体。screen和print是两种已定义的媒体类型。

媒体查询让样式表有更强的针对性，扩展了媒体类型的功能。媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color（等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

媒体查询语法

还可以在CSS样式表中使用媒体查询。例如，将下面的代码插入样式表，在屏幕宽度小于等于400像素的设备上，h1元素的文字颜色就会变成绿色。

@media screen and (max-device-width:400px) { h1 {color:green} }

还可以使用CSS的 @import 指令在当前样式表中按条件引入其他样式表。

例如下面的代码会给视口最大宽度为360像素的显示屏设备加载一个名为phone.css的样式表。

@import url(phone.css) screen and (max-width:360px);

切记，使用CSS的 @import 方式会增加HTTP请求（这会影响加载速度），所以请谨慎使用该方法。

为什么响应式设计需要媒体查询

在现代浏览器（如果是IE，至少要IE9）中浏览该网页并不断调整浏览器窗口宽度。页面的背景颜色就会根据当前的视口尺寸而发生变化。为了清晰起见，我在这里使用了颜色名称，但实际上最好使用十六进制颜色值，如 #ffffff。

接下来，让我们继续分析媒体查询，学习如何对其进行充分利用。

如果经常使用CSS2样式表，你就知道可以通过标签的 media 属性为样式表指定设备类型（如显示屏或打印机）。具体说来，就是在HTML页面的 标签中插入一个如下面代码片段所示的link标签：

媒体查询则能使我们根据设备的各种功能特性来设定相应的样式，而不仅仅只针对设备类型。可以将媒体查询想象成对浏览器的提问。如果浏览器回答是，则应用样式；如果回答是否，则不应用样式。

相对于在CSS2中能且只能问浏览器你是一块显示屏吗？，媒体查询能问的问题要多一点。

例如，媒体查询可以问：你是一块纵向放置的显示屏吗？我们看看对应的实际代码：

媒体查询表达式询问了媒体类型（你是一块显示屏吗？），然后询问了媒体特性（显示屏是纵向放置的吗？）。任何纵向放置的显示屏设备都会加载portrait-screen.css样式表，其他设备则会忽略该文件。

在媒体查询的开头追加 not 则会颠倒该查询的逻辑。例如，下面的代码就会颠倒前例中的效果，会使非纵向放置的显示屏设备加载样式文件：

也可以将多个表达式组合在一起。如，我们扩展一下前面的例子，限制只有视口宽度大于800像素的显示屏设备才能加载文件。

更进一步，还可以写一个媒体查询列表。查询列表中的任意一个查询为真，则加载文件。全部查询都不为真，则不加载。

例子如下：

标签： 响应式设计、 网站建设、 响应式网页设计、 为什么响应式设计需要媒体查询、 响应式网站建设、 网页设计、 CSS3、 HTML5、 网站建设、

本文地址： https://yihaiquanyi.com/article/6270aa155b456249b13d.html

上一篇：网站制作网站建设网站制作网页UI设计厦门网...
下一篇：前端开发人员可以考的证书前端开发人员必需...