CSSaspect-ratio メディア特性は、ビューポートのアスペクト比を調べるために使用します。

構文

aspect-ratio 特性は、ビューポートの幅対高さのアスペクト比を表現する <ratio> 値で指定します。これは範囲の特性であり、つまり接頭辞の付いた min-aspect-ratio および max-aspect-ratio の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。

以下の例は独自のビューポートを生成する <iframe> に含まれています。 <iframe> の大きさを変更して aspect-ratio の変化を確認してください。

HTML

<div id='inner'>
  ビューポートの幅と高さを変更しながら、この要素を見ていてください。
</div>

CSS

/* 最小アスペクト比 */
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /* blue */
  }
}

/* 最大アスペクト比 */
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff;  /* cyan */
  }
}

/* 正確なアスペクト比。上書きを防ぐために最下部に配置 */
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /* red */
  }
}

結果

仕様書

仕様書 状態 備考
Media Queries Level 4
aspect-ratio の定義
勧告候補 変更なし
Media Queries
aspect-ratio の定義
勧告 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
aspect-ratio media featureChrome 完全対応 3Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 9Opera 完全対応 ありSafari 完全対応 4.1WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 4.2Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, mdnwebdocs-bot
最終更新者: mfuji09,