<ratio>

<ratio>CSSデータ型で、アスペクト比メディアクエリ内で記述するために使用し、2つの単位のない値で比率を記述します。

構文

メディアクエリ Level 3 では、<ratio> データ型は、厳密な正の <integer>、スラッシュ ('/', Unicode の U+002F SOLIDUS)、2 番目の厳密な正の <integer> の順に記述します。スラッシュの前後にはスペースを入れてもかまいません。最初の数値は幅を、2番目の数値は高さを表します。

メディアクエリ Level 4 では、<ratio> データ型が更新され、厳密な正の <number>、スラッシュ ('/', Unicode の U+002F SOLIDUS)、2 番目の厳密な正の <number> の順に記述します。それに加えて、単独の <number> の値が許可されています。

メディアクエリでの使用

@media screen and (min-aspect-ratio: 16/9) { ... }

一般的なアスペクト比

比率 用例
Ratio4_3.png 4/3 20 世紀における伝統的な TV 画面の形状です。
Ratio16_9.png 16/9 現代の「ワイド画面」の TV の形状です。
Ratio1_1.85.png 185/100 = 91/50 1960 年代から用いられている最も一般的な映画スクリーンの形状です。
Ratio1_2.39.png 239/100 「ワイドスクリーン」、アナモルフィックな映画スクリーンの形状です。

仕様書

仕様書 状態 備考
Media Queries Level 4
<ratio> の定義
勧告候補
Media Queries
<ratio> の定義
勧告 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
<ratio>Chrome 完全対応 3Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 9Opera 完全対応 9.5Safari 完全対応 5WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 4.2Samsung Internet Android 完全対応 1.0
Accepts <number> / <number> or single <number> as a value.Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 70
無効
完全対応 70
無効
無効 From version 70: this feature is behind the layout.css.aspect-ratio-number.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報