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 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。语法：
only 用来限定整个查询结果，not 用对整个查询结果取反。如果使用关键字 not 或 only，必须明确指定一个媒体类型，并且关键字必须位于整个媒体查询语句的开头。1）and关键字 and 用来把媒体类型和多个媒体特性的表达式组合起来，合并到同一条媒体查询中。只有当媒体类型和每个表达式的结果都为真时，查询结果才为真。如：媒体查询的结果是一个布尔值：要么为true，要么为false。只有当 and 连接的所有部分都为true，整条媒体查询语句的结果才为 true。媒体查询也可以看作是对浏览器的提问。上述媒体查询首先会问“你是一块显示器吗？”，如果浏览器回答“是”，会继续问“你的最小宽度为700像素吗？”，如果浏览器回答“是”，再继续问“你的屏幕处于横向状态吗？”。只有当三个提问都回答“是”， 整条媒体查询语句的结果才为 true。2）only关键字 only用来限定范围，它将作用于整个查询结果。如：就仅仅对彩色显示屏设备有效，对其他任何设备均无效。它等价于：3）not关键字not用来对整个查询结果取反。如：就表示除单色显示屏设备外的所有设备。它等价于：而不是：除了单个查询外，也可以定义一个媒体查询的列表，列表之间用逗号隔开。如果列表中的任意一个媒体查询的结果为 true，媒体查询的列表的结果就为 true；否则，媒体查询的列表的结果就为 false。媒体查询列表中的每个查询相互独立，一个查询中的操作符并不影响其它的媒体查询。因此，媒体查询列表能作用于不同的媒体类型和媒体属性。如：上述媒体查询列表中包含两个媒体查询，对于最小宽度为免费云主机、域名700像素的任何设备，或者横屏的手持设备，媒体查询列表的结果为 true，其他情况均为 false。有了媒体查询，就可以使用它来构建响应式布局了。有两种使用媒体查询的方法：一种是使用 @media 规则，选择载入不同的CSS代码；一种是使用 标签的 media 属性，选择加载不同的样式表文件。设置媒体查询1）使用 @media 规则使用 @media 规则，要在同一个CSS 文件中，根据不同的媒体条件，定义不同的样式。用户浏览网页时，浏览器会根据媒体查询的结果，选择应用哪一段CSS代码。@media 规则的语法，是在 @media后，紧跟媒体类型和媒体特性，然后是一对大括号，在大括号中定义相应的样式规则。如：根据样式的层叠性，样式表中后定义的样式，会覆盖前面的相同样式。因此，就可以在样式表的开头定义基本样式，来适应所有的设计，再使用媒体查询重写相应的部分，让不同的媒体条件应用不同的样式规则。2）使用 标签的 media 属性使用 标签的 media 属性时，针对不同的媒体条件，定义不同的样式表文件，浏览器会根据媒体查询的结果，加载不同的样式表文件。这里定义了3个样式表文件reset.css、phone.css、screen.css，并让所有的显示屏设备都加载reset.css，让视口宽度小于 480px 的显示屏设备加载phone.css，让视口宽度大于768px的显示屏设备加载screen.css。可以看出，使用第一种方法，要在同一个CSS 文件中，写好几遍 @media；使用第二种方法，要写好几遍 标签。两种方法的效果相同，可以选择自己喜欢的方式。事实上，还可以是CSS的 @import 指令按条件引入其他样式表。如，以下代码对给视口最大宽度为 360px 的显示屏设备加载一个名为 small.css 的样式表文件。但是，使用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 脚本即可：但需要注意，respond.js 无法解析CSS的@import指令。因此，建议在已有的样式表中追加媒体查询的样式。如，在样式表文件中，使用 min-width 或 max-width 定义媒体查询：关于“css3媒体查询的语法关键字是哪个”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

相关推荐: miniui datagrid的客户端分页解决方法是怎样的

这期内容当中小编将会给大家带来有关miniui datagrid的客户端分页解决方法是怎样的，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。官方的解决方法官方在“在线示例”中给了一个简单的 client pagination …