CSS 更新媒體查詢

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

Adam Argyle
Adam Argyle
X GitHub

功能強大的 CSS 媒體查詢功能 工具：可讓使用者根據網站或應用程式外觀 而且會在裝置上顯示使用媒體查詢時 針對不同的螢幕大小、方向和其他因素設定不同的版面配置。

update敬上 媒體查詢可讓您根據裝置的刷新率調整使用者介面。 地圖項目可回報 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 中，您可以看到使用 新的媒體查詢：

其他資源