本頁面由 Cloud Translation API 翻譯而成。

CSS 更新媒體查詢

根據畫面的刷新率功能調整使用者介面。

Adam Argyle

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

update 媒體查詢可協助您根據裝置的刷新率調整 UI。這項功能可以回報 fast、slow 或 none 的值，該值與不同裝置的功能相關。

瀏覽器支援

裝置和刷新率

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

您可以查詢裝置，看看裝置是否有快速重新整理頻率來轉譯內容，據此設定樣式，同時仍提供單一樣式表。

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