CSS 更新媒體查詢

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

Adam Argyle
Adam Argyle
X GitHub

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

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

瀏覽器支援

  • Chrome：113。
  • Edge：113。
  • Firefox：102。
  • Safari：17。

資料來源

裝置和刷新率

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

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

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

其他資源