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

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

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

Adam Argyle

CSS メディアクエリは、表示されるデバイスに基づいてウェブサイトやウェブアプリの外観を制御できる強力なツールです。メディアクエリでは、画面サイズ、向き、その他の要因に応じてさまざまなレイアウトを作成できます。

update メディアクエリを使用すると、デバイスのリフレッシュレートに合わせて UI を調整できます。この機能は、さまざまなデバイスの機能に関連する fast、slow、none の値をレポートできます。

対応ブラウザ

デバイスとリフレッシュレート

設計するデバイスのほとんどは、リフレッシュレートが高速なデバイスです。これには、パソコンやほとんどのモバイルデバイスが含まれます。

デバイスにクエリを実行して、コンテンツをレンダリングするためのリフレッシュレートが速いかどうかを確認し、1 つのスタイルシートを配信しながら、それに応じてスタイルを設定できます。

@media (update: fast) {
  /* computer screens, totally cool to animate */
}

電子書籍リーダーや、低電力の決済システムなどのデバイスでは、更新速度が遅くなることがあります。デバイスがアニメーションや頻繁な更新に対応できないことを把握しておけば、バッテリーの使用量を抑え、ビューの更新エラーを防ぐことができます。

@media (update: slow) {
  /* e-book readers or severely underpowered devices */
}

最後に、印刷された紙や電子インクのディスプレイなど、1 つのレンダリングパスしか提供されないシナリオもあります。このような出力はまったく更新できず、none と呼ばれます。クエリは次のように実行できます。

@media (update: none) {
  /* one time render like printed paper */
}

次の CodePen では、この新しい更新メディアクエリを使用して、ホバーアニメーションが段階的に強化される様子を確認できます。