CSS媒体查询

根据设备的大致类型（如打印设备与带屏幕的设备）或者特定的特征和设备参数（例如屏幕分辨率和浏览器视窗宽度）来修改网站或应用程序的一种方式。

目的

• 有条件的通过 @media 和 @import at-rules 用CSS 装饰样式。

• 用media= 属性为style，link，source和其他HTML元素指定特定的媒体类型。

  <link rel="stylesheet" src="styles.css" media="screen" />
  

• 使用Window.matchMedia() 和MediaQueryList.addListener()方法来测试和监控媒体状态。

逻辑操作符

运用逻辑操作符可以联合构造复杂的媒体查询。

• and：用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真。它还用于将媒体功能与媒体类型结合在一起。

• not：用于否定媒体查询，如果不满足这个条件则返回 true，否则返回 false。如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。如果使用 not 运算符，则还必须指定媒体类型。

  只能用于否定整个媒体查询。以下两个相等：

  @media not all and (monochrome) { ... }
  @media not (all and (monochrome)) { ... } 
  

  也可以使用not否定一个特性：

  @media (not(hover)) { ... }
  

  也可以配合使用or测试多个特性：

  @media (not (color)) or (hover) { ... }
  

• only：仅在整个查询匹配时才用于应用样式。可以防止较早的浏览器应用所选样式。如果使用only运算符，则还必须指定媒体类型。

  @media only screen and (color) { ... }
  

  当不使用only时，旧版本的浏览器会将screen and (max-width: 500px)简单地解释为screen，忽略查询的其余部分，并将其样式应用于所有屏幕。

• ,（逗号）：用于将多个媒体查询合并为一个规则。由逗号分隔的语句都会分开处理，类似于逻辑或。

定位媒体类型

@media screen, print { ... }

媒体类型：

• all：适用于所有设备。

• print：适用于在打印预览模式下在屏幕上查看的分页材料和文档。

• screen：主要用于屏幕。

• speech：主要用于语音合成器。

定位媒体特性

@media (max-width: 12450px) { ... }

媒体特性：

名称	简介
any-hover	是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上？
any-pointer	可用的输入机制中是否有任何指针设备，如果有，它的精度如何？
aspect-radio	视窗（viewport）的宽高比
color	输出设备每个像素的比特值，常见的有 8、16、32 位。如果设备不支持输出彩色，则该值为 0
color-gamut	用户代理和输出设备大致程度上支持的色域
color-index	输出设备的颜色查询表（color lookup table）中的条目数量，如果设备不使用颜色查询表，则该值为 0
display-mode	应用程序的显示模式，如 web app 的 manifest 中的display 成员所指定
forced-colors	检测是 user agent 否限制调色板
grid	输出设备使用网格屏幕还是点阵屏幕？
height	视窗（viewport）的高度
hover	主要输入模式是否允许用户在元素上悬停
inverted-colors	user agent 或者底层操作系统是否反转了颜色
light-level	环境光亮度
monochrome	输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕，则该值为 0
orientation	视窗（viewport）的旋转方向
overflow-block	输出设备如何处理沿块轴溢出视窗 (viewport) 的内容
overflow-inline	沿内联轴溢出视窗 (viewport) 的内容是否可以滚动？
pointer	主要输入机制是一个指针设备吗？如果是，它的精度如何？
prefers-color-scheme	探测用户倾向于选择亮色还是暗色的配色方案
prefers-contrast	探测用户是否有向系统要求提高或降低相近颜色之间的对比度
prefers-reduced-motion	用户是否希望页面上出现更少的动态效果
prefers-reduced-transparency	用户是否倾向于选择更低的透明度
resolution	输出设备的像素密度（分辨率）
scan	输出设备的扫描过程（适用于电视等）
scripting	探测脚本（例如 JavaScript）是否可用
update	输出设备更新内容的渲染结果的频率
width	视窗（viewport）的宽度，包括纵向滚动条的宽度

width：之前是(30em <= width <= 50em )，现在支持 (width <= 30em)，(max-width: 30em)， (min-width: 30em) and (max-width: 50em)

实例

@media (min-width: 1485px) {
    .shelf {
        height: 20px;
        width: 100px,
    }
}