调整界面,使其适应屏幕的刷新率功能。
CSS 媒体查询是非常强大的 让您能够根据自己的需要 观看该视频。借助媒体查询,您可以创建 针对不同屏幕尺寸、屏幕方向和其他因素设置不同的布局。
通过
update
媒体查询使界面能够适应设备的刷新率。通过
功能可以报告与事件相关的 fast
、slow
或 none
值
不同设备的功能...
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<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 中,使用 这一新的更新媒体查询: