一、什么是媒体查询

CSS 媒体查询为你提供了一种应用 CSS 的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候 CSS 才会真的被应用，例如“视口宽于 480 像素”的时候。媒体查询是响应式 Web 设计的关键部分，因为它允许你按照视口的尺寸创建不同的布局，不过它也可以用来探测和你的站点运行的环境相关联的其它条件，比如用户是在使用触摸屏还是鼠标。

二、语法

@media media-type and (media-feature-rule) {
  css rules 
}

注释：

• media-type： 媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）（all 所有类型、print 打印类型、screen 屏幕类型、speech等）；
• media-feature-rule： 媒体表达式，是一个被包含的 CSS 生效所需的规则或者测试；
• css rules ： CSS 规则，会在测试通过且媒体类型正确的时候应用。

三、媒体特征规则

1、宽和高

为了建立响应式设计（已经广受浏览器支持），我们一般最常探测的特征是视口宽度，而且我们可以使用min-width、max-width和width媒体特征，在视口宽度大于或者小于某个大小——或者是恰好处于某个大小——的时候，应用 CSS。

例：

@media screen and (max-width: 400px) {
    body {
        color: blue;
    }
}

解释： width（和height）媒体特征可以以数值范围使用，于是就有了min-或者max-的前缀，指示所给的值是最小值还是最大值。上面的css要让颜色在视口窄于 400 像素的时候变成蓝色的话，可以用max-width。

2、朝向

一个受到良好支持的媒体特征是orientation，我们可以用它测得竖放（portrait mode）和横放（landscape mode）模式。

例：

@media (orientation: landscape) {
    body {
        color: rebeccapurple;
    }
}

解释： 上面代码指的是要在设备处于横向的时候改变 body 文本颜色。

3、逻辑“与”

为了混合媒体特征，你可以以与在上面使用and很相同的方式，用and来混合媒体类型和特征。

例：

@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
}

解释： 我们可能会想要测得min-width和orientation，而 body 的文字只会在视口至少为 400 像素宽，且设备横放时变为蓝色。

4、逻辑“或”

如果你有一组查询，且要其中的任何一个都可以匹配的话，那么你可以使用逗号分开这些查询。

例：

@media screen and (min-width: 400px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

解释： 文本会在视口至少为 400 像素宽的时候或者设备处于横放状态的时候变为蓝色。如果其中的任何一项成立，那么查询就匹配上了。

5、逻辑“非”

你可以用not操作符让整个媒体查询失效，这就直接反转了整个媒体查询的含义。

例：

@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}

解释： 文本只会在朝向为竖着的时候变成蓝色。