css3媒体查询的语法关键字是哪个

这篇文章将为大家详细讲解有关css3媒体查询的语法关键字是哪个，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

css3媒体查询的语法关键字是“@media”，它允许为页面设置不同的媒体条件，并根据条件来应用相应的样式；基本语法格式为“@media mediatype and|not|only(media feature) {CSS-Code;}”。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

媒体查询（Media Queries）是CSS3中提出的一个新概念，它允许为页面设置不同的媒体条件，并根据条件来应用相应的样式。

css3媒体查询的语法关键字是“@media”。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

语法：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

only 用来限定整个查询结果，not 用对整个查询结果取反。如果使用关键字 not 或 only，必须明确指定一个媒体类型，并且关键字必须位于整个媒体查询语句的开头。

1）and

关键字 and 用来把媒体类型和多个媒体特性的表达式组合起来，合并到同一条媒体查询中。只有当媒体类型和每个表达式的结果都为真时，查询结果才为真。如：

screen and (min-width: 700px) and (orientation: landscape)

媒体查询的结果是一个布尔值：要么为true，要么为false。只有当 and 连接的所有部分都为true，整条媒体查询语句的结果才为 true。

媒体查询也可以看作是对浏览器的提问。上述媒体查询首先会问“你是一块显示器吗？”，如果浏览器回答“是”，会继续问“你的最小宽度为700像素吗？”，如果浏览器回答“是”，再继续问“你的屏幕处于横向状态吗？”。只有当三个提问都回答“是”， 整条媒体查询语句的结果才为 true。

2）only

关键字 only用来限定范围，它将作用于整个查询结果。如：

only screen and (color)

就仅仅对彩色显示屏设备有效，对其他任何设备均无效。它等价于：

not (screen and (color))

3）not

关键字not用来对整个查询结果取反。如：

not (screen and (monochrome))

就表示除单色显示屏设备外的所有设备。它等价于：

not (screen and (monochrome))

而不是：

(not screen) and (monochrome)

除了单个查询外，也可以定义一个媒体查询的列表，列表之间用逗号隔开。如果列表中的任意一个媒体查询的结果为 true，媒体查询的列表的结果就为 true；否则，媒体查询的列表的结果就为 false。

媒体查询列表中的每个查询相互独立，一个查询中的操作符并不影响其它的媒体查询。因此，媒体查询列表能作用于不同的媒体类型和媒体属性。如：

(min-width: 700px), handheld and (orientation: landscape)

上述媒体查询列表中包含两个媒体查询，对于最小宽度为700像素的任何设备，或者横屏的手持设备，媒体查询列表的结果为 true，其他情况均为 false。

有了媒体查询，就可以使用它来构建响应式布局了。有两种使用媒体查询的方法：一种是使用 @media 规则，选择载入不同的CSS代码；一种是使用 <link> 标签的 media 属性，选择加载不同的样式表文件。

设置媒体查询

1）使用 @media 规则

使用 @media 规则，要在同一个CSS 文件中，根据不同的媒体条件，定义不同的样式。用户浏览网页时，浏览器会根据媒体查询的结果，选择应用哪一段CSS代码。

@media 规则的语法，是在 @media后，紧跟媒体类型和媒体特性，然后是一对大括号，在大括号中定义相应的样式规则。如：

@media screen and (max-device-width: 480px) { 
 /* 如果设备宽度 <= 480px，将会应用这里的 CSS 代码 */
}
@media screen and (max-width: 768px) { 
 /* 如果视口宽度 <= 768px，将会应用这里的 CSS 代码 */
}

根据样式的层叠性，样式表中后定义的样式，会覆盖前面的相同样式。因此，就可以在样式表的开头定义基本样式，来适应所有的设计，再使用媒体查询重写相应的部分，让不同的媒体条件应用不同的样式规则。

2）使用 <link> 标签的 media 属性

使用 <link> 标签的 media 属性时，针对不同的媒体条件，定义不同的样式表文件，浏览器会根据媒体查询的结果，加载不同的样式表文件。

<link rel="stylesheet" media="screen" href="reset.css">
<link rel="stylesheet" media="screen and (max-width: 480px)" href="phone.css">
<link rel="stylesheet" media="screen and (min-width: 768px)" href="screen.css">

这里定义了3个样式表文件reset.css、phone.css、screen.css，并让所有的显示屏设备都加载reset.css，让视口宽度小于 480px 的显示屏设备加载phone.css，让视口宽度大于768px的显示屏设备加载screen.css。

可以看出，使用第一种方法，要在同一个CSS 文件中，写好几遍 @media；使用第二种方法，要写好几遍 <link> 标签。两种方法的效果相同，可以选择自己喜欢的方式。

事实上，还可以是CSS的 @import 指令按条件引入其他样式表。如，以下代码对给视口最大宽度为 360px 的显示屏设备加载一个名为 small.css 的样式表文件。

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

但是，使用CSS的 @import 方式会增加HTTP请求，这会影响页面的加载速度，因此并不推荐使用这种方法。

在媒体查询中，把设备宽度的临界点称作断点，并把媒体特性 min-width 和 max-width 对应的属性值称作断点值。

综上所述，媒体查询就是使用断点来创建媒体查询的条件，并为每个断点调用一个样式表文件（或样式代码），来实现在不改变页面内容的情况下，为不同的设备及不同尺寸的设备定制显示效果。

说明：让IE6~8支持媒体查询

虽然媒体查询已经被广泛使用，并得到所有现代浏览器的支持，但IE 9以下的老版本浏览器却不支持它。可以选择给老版本的IE添加垫片脚本，让它们支持媒体查询功能。

respond.js（https://github.com/scottjehl/Respond）是一个快速、轻量的 Javascript 工具，它会遍历页面上的所有 CSS 引用，并使用媒体查询分析 CSS 规则。然后，监控浏览器宽度的变化，并添加或删除与媒体查询匹配的样式，使原本不支持媒体查询的IE6-8 支持媒体查询的 min-width 和 max-width 特性。

respond.js的使用非常简单，只需在页面所有的CSS之后，使用IE条件注释，让IE6-8版本加载 respond.js 脚本即可：

<!--[if lt IE 9]>
<script  src="respond.js "></script>
<![endif]-->

但需要注意，respond.js 无法解析CSS的@import指令。因此，建议在已有的样式表中追加媒体查询的样式。如，在样式表文件中，使用 min-width 或 max-width 定义媒体查询：

@media screen and (max-width: 480px) {undefined
    // 针对视口宽度小于 480px 的显示屏设备定义样式
}

关于“css3媒体查询的语法关键字是哪个”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。