12. 媒体查询

媒体查询可以针对不同的设备环境应用不同的 CSS，是响应式 Web 设计的关键部分

语法

@media media-type and (media-feature-rule) {
  /* CSS rules */
}

它由以下部分组成：

• 一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的
• 一个媒体表达式，是一个被包含的 CSS 生效所需的规则或者测试
• 一组 CSS 规则，会在测试通过且媒体类型正确的时候应用

media-type 媒体类型：

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

media-feature-rule CSS生效所需的规则或者测试，必须使用括号括起来，常用的有：

• width：视口（包括纵向滚动条）的宽度
• height：视口的高度
• aspect-ratio：视口宽高比
• orientation：视口的旋转方向
• prefers-color-scheme：亮色还是暗色的配色方案
• scripting：JS 脚本是否可用
• hover：是否允许用户在元素上悬停
• resolution：输出设备的像素密度（分辨率）
• …

逻辑运算

与

同时满足多个条件时生效，用 and 连接

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

或

满足任意一个生效，用 , 分隔或者用 or

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

非

否定媒体查询，用 not 放在一个规则的开头，表示不满足这条规则时应用 css。如果有逗号分隔的多个条件，仅排除它那条

@media not screen, (max-width: 500px) {
  body {
    background-color: blue;
  }
}

上面语法表示 非屏幕设备，或者最大宽度为 500px 时，样式生效