このページは Cloud Translation API によって翻訳されました。

CSS によるメディアクエリの更新

画面のリフレッシュレート機能に合わせて UI を調整します。

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 では、次のコマンドを使用して、ホバーアニメーションを段階的に拡張しています。新しい更新メディアクエリ: