アスペクト比メディアクエリ
aspect-ratioメディア機能を使用して特定の画面比率をターゲット。ウルトラワイド、16:9、4:3ディスプレイ向けにレイアウトを最適化。
Advanced Features
詳細な説明
aspect-ratioメディア機能の使用
aspect-ratioメディア機能を使用すると、絶対的なピクセル値ではなく、ビューポートの幅と高さの比率に基づいてスタイルを適用できます。
一般的なアスペクト比
| 比率 | 一般的なデバイス |
|---|---|
| 9/16 | スマホポートレート |
| 4/3 | iPadランドスケープ、古いモニター |
| 16/9 | ほとんどのノートPC、TV |
| 21/9 | ウルトラワイドモニター |
aspect-ratio vs widthの使い分け
- 一般的なレスポンシブデザインにはwidthブレークポイントを使用
- ビューポートの絶対的なサイズではなく形状に依存するレイアウトにはaspect-ratioを使用
ユースケース
フルスクリーンアプリケーション、ビデオプレーヤー、またはダッシュボードで、絶対的なサイズに関係なく画面がワイド（ランドスケープ）かトール（ポートレート）かに基づいてレイアウトを適応させる場合にこのクエリを使用してください。