CSS 更新媒体查询

根据屏幕的刷新率功能调整界面。

Adam Argyle
Adam Argyle
X GitHub

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

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

浏览器支持

  • Chrome：113.
  • Edge：113.
  • Firefox：102.
  • Safari：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 中，查看使用此新更新媒体查询的渐进式增强型悬停动画：

更多资源