CSS 媒体功能 update 有助于检查设备在显示内容后可以更改内容外观的重复程度。
可能的值
- none - 显示未更新。此值通常用于打印的文档。
- slow - 显示器的刷新率较慢。这在电子书阅读器或速度非常慢的设备上很常见。
- fast - 显示器具有快速刷新率。这允许使用定期更新的元素，如CSS动画，这是计算机屏幕的典型特征。
语法
update: none|slow|fast;
CSS update - none 值
以下示例演示了使用 update： none 媒体功能在输出设备的更新频率为 none 时将动画应用于 body 元素。此动画在常规屏幕上不可见，但当您在类似打印页面上查看时，它会产生效果 -
<html>
<head>
<style>
body {
color: black;
}
@media (update: none) {
body {
animation: animation 1s infinite;
color: red;
}
}
@keyframes animation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
button {
background-color: violet;
padding: 5px;
}
</style>
</head>
<body>
<p>Click on below button to see the effect when you print the page.</p>
<button onclick="printPage()">Print Page</button>
<p>CSS Media feature update: none</p>
<script>
function printPage() {
window.print();
}
</script>
</body>
</html>
CSS update - slow值
如果您使用更新：慢速媒体功能，您应该会看到文本内容向右移动，并在更新显示速度较慢的设备上变为红色。这包括低功率设备和电子墨水显示器等设备。
这是一个例子 -
<html>
<head>
<style>
body {
color: black;
}
@media (update: slow) {
body {
animation: animation 1s infinite;
color: red;
}
}
@keyframes animation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
</style>
</head>
<body>
<h3>You can see the effect of the update: slow media query on low-powered devices and e-ink displays.</h3>
<p>CSS Media feature update: slow</p>
</body>
</html>
CSS update - fast值
以下示例演示了 update： fast media 功能将导致 body 元素在 1 秒内向右移动 100 像素，然后向左移动 -
<html>
<head>
<style>
body {
color: black;
}
@media (update: fast) {
body {
animation: animation 1s infinite;
color: red;
}
}
@keyframes animation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
</style>
</head>
<body>
<p>CSS Media feature update: fast</p>
</body>
</html>
