媒体查询

**媒体查询**是一种逻辑表达式，用于 CSS、JavaScript、HTML 和其他 Web 语言，来检查文档显示所在的用户的代理或设备的各个方面，与文档内容无关，以确定是否应应用相关的代码块或功能。

媒体查询用于有条件地应用 CSS 样式，使用 CSS @media 和 @import at-规则，以及在 JavaScript 中使用 matchMedia() 方法、 matches 属性和 change 事件来测试和监控媒体状态。 媒体查询用作 <link>、<source> 和 <style> HTML 元素的 media 属性的值，如果媒体查询为真，则有条件地应用链接、源或样式。 当省略 media 属性时，它默认为 true。 媒体查询也用作 sizes 属性的值，该属性属于 <img> 元素。

媒体查询由可选的媒体查询修饰符和媒体类型以及零个或多个媒体条件以及逻辑运算符组成。

媒体查询会根据用户环境的变化重新评估，例如，当用户扩展浏览器窗口或将移动设备翻转到侧面，从纵向模式切换到横向模式时。

多个用逗号分隔的媒体查询会创建一个 **媒体查询列表**。 如果媒体查询列表中的任何一个组成部分为真，则该列表为真，只有当所有组成部分都为假时，该列表才为假。

媒体查询可以可选地以单个媒体查询修饰符或 not 或 only 为前缀，在 not 的情况下，会改变后面媒体查询的含义。