一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成,例如宽度、高度和颜色。媒体查询,添加自CSS3,允许内容的呈现针对一个特定范围的输出设备而进行裁剪,而不必改变内容本身。

媒体查询经常被用于响应式开发或者在特定条件下触发某个动作,比如在屏幕尺寸大于或者小于某个尺寸时,设置某个元素的宽和高;在屏幕尺寸小于800像素下加载一个CSS样式表等等。有了媒体查询,极大程度的方便了Web开发者,而现在手机的流行,许多开发者不得不把移动端的重要性提高,Web设计人员和开发人员需要确保他们的作品在移动设备上同样能正常运作,并且看上去和在传统台式电脑上一样好。

媒体查询的应用有很多,比如著名的BootStrap就利用媒体查询来开发了一套前端CSS框架,为刚入门的开发者提供了很多便利,但是使用框架多多少少都需要自己定义一些规则,这对新手或者没接触过CSS的人有点不利,接下来就介绍下基本的媒体查询规则。

媒体查询语法

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

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {  //设置媒体查询为最高宽度不小于600px时触发
  .facet_sidebar {
    display: none;
  }
}
</style>

当媒体查询为true时,其对应的样式表或样式规则就会遵循正常的级联规则进行应用。即使媒体查询返回false,<link> 标签指向的样式表也将会被下载(但是它们不会被应用)

逻辑操作符

你可以使用逻辑操作符,包括not、and和only等,构建复杂的媒体查询。and操作符用来把多个媒体属性组合成一条媒体查询,对成链式的特征进行请求,只有当每个属性都为真时,结果才为真。not操作符用来对一条媒体查询的结果进行取反。only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式,这对于防止让选中的样式在老式浏览器中被应用到。若使用了not或only操作符,必须明确指定一个媒体类型。

and

and关键字用于合并多个媒体属性或合并媒体属性与媒体类型。一个基本的媒体查询,即一个媒体属性与默认指定的all媒体类型,可能像这样子:

@media (min-width: 700px) { ... }

如果你只想在横屏时应用这个,你可以使用 and 操作符合并媒体属性:

(min-width: 700px) and (orientation: landscape) { ... }

逗号分隔符

媒体查询中使用逗号分隔效果等同于or逻辑操作符。当使用逗号分隔的媒体查询时,如果任何一个媒体查询返回真,样式就是有效的。逗号分隔的列表中每个查询都是独立的,一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。

例如,如果你想在最小宽度为700像素或是横屏的手持设备上应用一组样式,你可以这样写:

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

如上文,如果是一个800像素宽的屏幕设备,媒体语句将会返回真,因为第一部分相当于 @media all and (min-width: 700px) 将会应用于该设备并且返回真,尽管我的屏幕媒体类型并不与第二部分的手持媒体类型相符。同样地,如果我是一个500像素宽的横屏手持设备,尽管第一部分因为宽度问题而不匹配,第二部分仍会成功,因此整个媒体查询返回真。

not

not 关键字应用于整个媒体查询,在媒体查询为假时返回真 (比如 monochrome 应用于彩色显示设备上或一个600像素的屏幕应用于 min-width: 700px 属性查询上 )。在逗号媒体查询列表中not仅会否定它应用到的媒体查询上而不影响其它的媒体查询。 not关键字仅能应用于整个查询,而不能单独应用于一个独立的查询。

only

only关键字防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式:

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

min-width和max-width

大多数媒体属性可以带有“min-”或“max-”前缀,用于表达“最低...”或者“最高...”。例如,max-width:12450px表示应用其所包含样式的条件最高是宽度为12450px,大于12450px则不满足条件,不会应用此样式。这避免了使用与HTML和XML冲突的“<”和“>”字符。如果你未向媒体属性指定一个值,并且该特性的实际值不为零,则该表达式被解析为真。

比如要在最低宽度为320px到最高宽度992px时设置元素.slidebar的display属性的属性值为:block。

@media only screen and (min-width: 320px) and (max-width: 992px) {
	.slidebar {
		display: block !important;
	}
}

浏览器兼容性

特征 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本支持 21 3.5/(1.9.1) 9.0 9 4
grid ? 未实现 (grid media type is not supported) ? ? ?