189 8069 5689
这篇文章将为大家详细讲解有关css3媒体查询的语法关键字是哪个，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
成都创新互联服务项目包括化德网站建设、化德网站制作、化德网页制作以及化德网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，化德网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到化德省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
css3媒体查询的语法关键字是“@media”，它允许为页面设置不同的媒体条件，并根据条件来应用相应的样式；基本语法格式为“@media mediatype and|not|only(media feature) {CSS-Code;}”。
.jpg)
本教程操作环境：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代码；一种是使用 标签的 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）使用 标签的 media 属性
使用 标签的 media 属性时，针对不同的媒体条件，定义不同的样式表文件，浏览器会根据媒体查询的结果，加载不同的样式表文件。