CSS 更新媒体查询

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

Adam Argyle
Adam Argyle
X GitHub

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

借助 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 中，您会看到使用以下新的更新媒体查询逐渐增强的悬停动画：

更多资源