端末の状態に応じてスタイルを出し分ける、スタイルとは別の CSS の機能。主にレスポンシブデザインを実現する際に利用される。
端末の状態には様々あるが、スクリーンの幅・高さ・ DPI 、デバイスの縦置き・横置きなどがある。
工数削減や効率化とは違い、 UX 向上に役立つ機能と言える。
デモ
ウィンドウの幅を変更すると、画像が 3 段階に変化する。
注意
- 上記デモのような「画面幅に応じてスタイルを変える」程度であれば間違いなく動作するが、他の条件でスタイルを変更する場合は検証が必要。
応用例
See the Pen Media Query Mario by Ashley Nolan (@ashleynolan) on CodePen.