<ratio>

<ratio> CSS データ型は、メディアクエリ における画面比率の記述に使用され、単位無しの 2 値の比率で示します。

構文

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

メディアクエリ Level4 では、<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
<ratio> の定義
勧告 初期定義
Media Queries Level 4
<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 未対応 なし

凡例

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

関連情報