CSS 更新媒體查詢

根據螢幕的刷新率調整 UI。

Adam Argyle

CSS 媒體查詢是一項強大的工具，可讓您根據網站或網頁應用程式所在的裝置，控制網站或網頁應用程式的外觀。您可以使用媒體查詢，為不同的螢幕大小、螢幕方向和其他因素建立不同的版面配置。

update 媒體查詢可讓您將 UI 調整為裝置的更新率。這項功能可回報 fast、slow 或 none 的值，與不同裝置的功能有關。

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Source

裝置和刷新率

您設計的大多數裝置可能具有快速的刷新率。包括電腦和多數行動裝置。

您可以查詢裝置，瞭解該裝置是否具備快速的螢幕刷新率，以便算繪內容，並據此調整樣式，同時仍提供單一樣式表。

@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 中，您可以查看使用這項全新更新媒體查詢的逐漸強化懸停動畫：

其他資源