CSS device-aspect-ratio メディア特性
非推奨
この機能を新しいプロジェクトで使用することは避けてください。 Device media queries do not reflect available layout, only the physical size of the device. この機能は、ウェブ標準やブラウザーから除去される可能性があります。
代わりに使用を検討すべき機能として、 Media queriesがあります。
メモ:
ビューポートのアスペクト比を問い合わせる場合は、代わりに aspect-ratio メディア特性を使用してください。
device-aspect-ratio は CSS のメディア特性で、出力機器の幅対高さのアスペクト比を調べるために使用します。
構文
device-aspect-ratio 特性は、 <ratio> で指定します。これは範囲の特性であり、つまり接頭辞の付いた min-device-aspect-ratio および max-device-aspect-ratio の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。
例
min-device-aspect-ratio の使用
css
article {
padding: 1rem;
}
@media screen and (min-device-aspect-ratio: 16/9) {
article {
padding: 1rem 5vw;
}
}
仕様書
| 仕様書 |
|---|
| Media Queries Level 4 # device-aspect-ratio |