【CSS Modules】device-aspect-ratioメディア機能の使い方

device-aspect-ratioプロパティは、デバイスの表示領域のアスペクト比に関する条件を保持するプロパティです。これはCSSのメディアクエリ（Media Queries）で使用されるメディア特性の一つで、ウェブサイトやアプリケーションのデザインを、ユーザーが利用しているデバイスの物理的な画面の幅と高さの比率に基づいて調整するために利用されます。

このプロパティは、スマートフォン、タブレット、デスクトップモニターなど、様々なデバイスが持つ固有のアスペクト比に応じて、特定のCSSスタイルを適用するかどうかを判断できます。重要な点として、device-aspect-ratioが対象とするのは、そのデバイスが持つ物理的な画面のアスペクト比です。これに対し、aspect-ratioという似た名前のメディア特性は、ブラウザの表示領域、つまりビューポートのアスペクト比を指します。例えば、デスクトップ環境でブラウザウィンドウのサイズを変更した場合、aspect-ratioの値は変化しますが、device-aspect-ratioの値はデバイスの物理的な画面比率なので変化しません。

値は、幅と高さをスラッシュ（/）で区切った比率形式で指定します。例えば、16/9や4/3のように記述します。このプロパティ単独で真偽を問うことは少なく、通常はmin-またはmax-プレフィックスと組み合わせて、アスペクト比の範囲で条件を指定します。例えば、@media screen and (min-device-aspect-ratio: 16/9) と記述することで、画面のアスペクト比が16:9以上の場合に適用されるスタイルを定義できます。

device-aspect-ratioは、特定のデバイスのハードウェア特性に合わせたレスポンシブデザインを実現し、より最適化されたユーザーエクスペリエンスを提供するために役立つプロパティです。

Copy
1@media (device-aspect-ratio: 16/9) {
2  body {
3    line-height: 1.5;
4  }
5}

引数なし

引数はありません

戻り値なし

戻り値はありません