媒体查询

媒体查询，是我们让网站适配各设备尺寸的方式之一，它是响应式设计的关键组成部分。

常用的方式有两种：

• 外联媒体查询
• 内嵌式媒体查询

外联媒体查询

语法：

<link rel="stylesheet" type="text/css" media="screen and (min-width: 960px)" href="red.css" />

当屏幕大于等于 960px 的时候，引入 red.css 文件

内嵌式媒体查询

和外联式不同，内嵌式的媒体查询是直接写在一个 css 中的。

@media screen and (min-width: 640px) and (max-width: 960px) {
    body {
        background-color: pink;
    }
}

当屏幕尺寸大于等于 640px 且小于等于 960px 时，body 元素的背景色为粉红色。

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

当屏幕尺寸小于等于 640px 时，body 元素的背景色为蓝色。

其他说明

媒体类型

我们这里主要说的是用于布局的媒体查询，所以这里的媒体类型为 screen，即适用于屏幕。还有其他三种类型：

• all：适用于所有设备
• print：适用于在打印预览模式下在屏幕上查看的分页材料和文档
• speech：主要用于语音合成器

screen 类型针对于浏览器的可视尺寸而言的（这和分辨率也有关系）

逻辑操作符

也就是例子中的 and ，剩下还有 not 和 only，它们就是用来联合构造复杂的媒体查询的，我们可以使用逗号分隔多个媒体查询，将它们组合成一个规则。

其中：

• and：我们可以理解为 JS 中的逻辑与运算符（&&），也就是说要同时满足 and 符号后面的表达式才会生效
• not：顾名思义，取反
• only：仅在整个查询匹配时才用于应用样式

还有一些更复杂的玩儿法，但是平常项目中都使用不到，只有一些特殊场景下才会用到，比如 print 打印和语音等。