媒体查询

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

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

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

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

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

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