根據螢幕的刷新率功能調整使用者介面。
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 中,瞭解如何使用這項新的更新媒體查詢,逐步強化懸停動畫: