<ratio>

Der <ratio> CSS Datentyp, der zur Beschreibung von Seitenverhältnissen in Media Queries verwendet wird, bezeichnet das Verhältnis zwischen zwei einheitenlosen Werten. Es ist ein strikt positiver <integer> Wert gefolgt von einem Slash ('/', Unicode U+002F SOLIDUS) und einem zweiten strikt positivem <integer>. Vor und nach dem Schrägstrich können Leerzeichen stehen.

Beispiele

  Verhältnis Verwendung
Ratio4_3.png 4/3 Traditionelles TV-Format im 20sten Jahrhundert.
Ratio16_9.png 16/9 Modernes Breitbild-TV-Format.
Ratio1_1.85.png 185/100 = 91/50
(Nicht-Ganzzahl-Dividenden und -Divisoren sind nicht erlaubt.)
Die häufigsten Filmformate seit den 1960ern.
Ratio1_2.39.png 239/100
(Nicht-Ganzzahl-Dividenden und -Divisoren sind nicht erlaubt.)
Das anamorphe Breitbild-Filmformat.

Spezifikationen

Spezifikation Status Kommentar
Media Queries
Die Definition von '<ratio>' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
<ratio>Chrome Vollständige Unterstützung 3Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 3.5IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 9.5Safari Vollständige Unterstützung 4.1WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 4.2Samsung Internet Android Vollständige Unterstützung 1.0
Accepts <number> / <number> or single <number> as a value.Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 70IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung

Siehe auch