CSS3@media媒体查询

CSS3@media媒体查询

定义

media媒体查询， 当文档宽度变化时， 就可以根据文档宽度的变化来运用样式，不同的宽度应用不同的样式

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

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

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

语法

在CSS中，@media规则可置于您代码的顶层或位于其它任何@条件规则组内

媒体查询包含一个可选的媒体类型和媒体特性表达式(0或多个)最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true。

实例： 如果文档宽度小于 300 像素时 .box 使用这个样式( 超过了这个宽度就不使用这个样式了)，（表达式为真执行）

@media screen and (max-width: 300px) {
    .box {
        background-color:lightblue;
        width: 200px;
    }
}

除了在@media 规则中使用外，媒体查询也可应用于HTML标签以将样式表的应用限于某个特定媒体。

<!-- Media-dependent style sheet included in HTML -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen-styles.css" />

逻辑操作符

使用逻辑操作符，包括not、and和only等，构建复杂的媒体查询。

and 操作符用来把多个媒体属性组合成一条媒体查询，对成链式的特征进行请求，只有当每个属性都为真时，结果才为真。

not 操作符用来对一条媒体查询的结果进行取反。

only 操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，这对于防止让选中的样式在老式浏览器中被应用到。

若使用了not或only操作符，必须明确指定一个媒体类型。

媒体类型

all 　适用于所有设备。

print　为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media（媒体屏幕尺寸）, 以满足个别设备网页尺寸不匹配等问题。

screen　　主要适用于彩色的电脑屏幕