CSS 媒体功能 - update_CSS 菜鸟教程

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>

<< CSS 数据类型 - angle CSS 媒体功能 - width >>