此页面由 Cloud Translation API 翻译。

CSS 更新媒体查询

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

Adam Argyle

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

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

浏览器支持

设备和刷新率

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

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

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