CSS 更新媒体查询

调整界面，使其适应屏幕的刷新率功能。

Adam Argyle

CSS 媒体查询是一款强大的工具，可让您根据网站或网络应用的查看设备来控制其外观。借助媒体查询，您可以针对不同的屏幕尺寸、屏幕方向和其他因素创建不同的布局。

借助 update 媒体查询，您可以根据设备的刷新率调整界面。该功能可以报告 fast、slow 或 none 值，该值与不同设备的功能相关。

浏览器支持

• 113
• 113
• 102
• 17

来源

设备和刷新率

您设计的大多数设备都有较快的刷新频率。这包括桌面设备和大多数移动设备。

您可以查询设备，了解其渲染内容的刷新频率是否较快，并进行相应的样式设置，同时仍提供单个样式表。

@media (update: fast) {
  /* computer screens, totally cool to animate */
}

电子阅读器和设备（例如低功耗付款系统）的刷新率可能较慢。知道设备无法处理动画或频繁的更新，意味着您可以节省电量消耗或错误的视图更新。

@media (update: slow) {
  /* e-book readers or severely underpowered devices */
}

最后，在某些情况下，打印纸或电子墨水显示屏可能只提供一个渲染通道。此类输出无法刷新，称为 none。您可以按如下方式查询它：

@media (update: none) {
  /* one time render like printed paper */
}

在以下 CodePen 中，您可以看到使用此新更新媒体查询的渐进式增强的悬停动画：

更多资源

• CSS 媒体查询级别 4
• 更新 MDN 上的媒体查询