CSS 更新媒体查询

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

Adam Argyle
Adam Argyle
X GitHub

CSS 媒体查询是非常强大的 让您能够根据自己的需要 观看该视频。借助媒体查询，您可以创建 针对不同屏幕尺寸、屏幕方向和其他因素设置不同的布局。

通过 update 媒体查询使界面能够适应设备的刷新率。通过 功能可以报告与事件相关的 fast、slow 或 none 值 不同设备的功能...

浏览器支持

  • Chrome：113。 <ph type="x-smartling-placeholder">
  • Edge：113。 <ph type="x-smartling-placeholder">
  • Firefox：102。 <ph type="x-smartling-placeholder">
  • Safari：17. <ph type="x-smartling-placeholder">

来源

设备和刷新率

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

您可以查询设备，看看它是否具有较快的呈现刷新频率 内容和样式进行相应的调整，同时仍然提供单个样式表。

@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 中，使用 这一新的更新媒体查询：

更多资源