CSS 媒体特性 - 更新

CSS update 媒体特性有助于检查设备在内容显示后更改内容外观的频率。

可能的值

none − 显示不更新。此值通常用于打印文档。
slow − 显示刷新率低。这在电子书阅读器或非常慢的设备上很常见。
fast − 显示刷新率高。这允许使用定期更新的元素，例如 CSS 动画，这在计算机屏幕上很常见。

语法

update: none|slow|fast;

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS update - none 值

以下示例演示了如何使用 update: none 媒体特性在输出设备的更新频率为 none 时将动画应用于 body 元素。此动画在普通屏幕上不可见，但在您在打印页面等内容上查看时会产生效果。−

Open Compiler

<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 值

如果您使用 update: slow 媒体特性，您应该会看到文本内容在显示更新缓慢的设备上向右移动并变成红色。这包括低功耗设备和电子墨水显示器等设备。

这是一个示例：−

Open Compiler

<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 媒体特性将导致 body 元素在 1 秒内向右移动 100 像素，然后返回左侧。−

Open Compiler

<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>

打印页面