阅读数:86 评论数:0

一、media语法

@media 媒体类型 only (选取条件) not (选取条件) and (选取条件)

1、媒体类型

媒体类型用来表示设备的类别。

2、媒体特性

除了具体的类型外，还可以通过一些属性来描述设备的具体特征。

3、逻辑操作符

逻辑操作符包含 not、and 和 only 三个，通过逻辑操作符可以构建复杂的媒体查询，您还可以通过逗号来分隔多个媒体查询，将它们组合为一个规则。

（1）and

用于将多个媒体查询组合成一条媒体查询，当每个查询规则都为真时则该条媒体查询为真，另外通过 and 操作符还可以将媒体特性与媒体类型结合在一起；

（2）not

用于否定媒体查询，当查询规则不为真时则返回 true，否则返回 false。如果使用 not 操作符，则还必须指定媒体类型；

（3）only

仅在整个查询匹配时才会生效，当不使用 only 时，旧版的浏览器会将 screen and (max-width: 500px) 简单地解释为 screen，忽略查询的其余部分，并将样式应用于所有屏幕。 如果使用 only 运算符，则还必须指定媒体类型。

二、示例

// 匹配横屏
@media all and (orientation: landscape){}
// 匹配竖屏
@media all and (orientation: portrait){}
// 高度在600px~960px
@media all and (min-height: 640px) and (max-height:960px)