画面のリフレッシュ レート機能に合わせて UI を調整します。
CSS メディアクエリは強力で、 ウェブ アプリケーションの外観をコントロールできるツールです。 ダウンロードされます。メディアクエリでは 画面のサイズ、向き、その他の要因に応じてさまざまなレイアウトを使用できます。
「
update
メディアクエリを使用すると、UI をデバイスのリフレッシュ レートに適応させることができます。「
特徴は、関連する値 fast
、slow
、または none
をレポートできます。
..
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
デバイスとリフレッシュ レート
設計するデバイスのほとんどは、リフレッシュ レートが高速なデバイスです。この パソコンとほとんどのモバイル デバイスが含まれます。
デバイスにクエリを実行して、レンダリング用のリフレッシュ レートが速いかどうかを確認できます。 コンテンツを作成し、それに応じてスタイルを設定しながら、単一のスタイルシートを提供します。
@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 では、次のコマンドを使用して、ホバー アニメーションを段階的に拡張しています。 新しい更新メディアクエリ: