<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
	`4/3`	Traditionelles TV-Format im 20sten Jahrhundert.
	`16/9`	Modernes Breitbild-TV-Format.
	`185/100` = `91/50` (Nicht-Ganzzahl-Dividenden und -Divisoren sind nicht erlaubt.)	Die häufigsten Filmformate seit den 1960ern.
	`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

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
<ratio>	Chrome Vollständige Unterstützung 3	Edge Vollständige Unterstützung 12	Firefox Vollständige Unterstützung 3.5	IE Vollständige Unterstützung 9	Opera Vollständige Unterstützung 9.5	Safari Vollständige Unterstützung 4.1	WebView Android Vollständige Unterstützung ≤37	Chrome Android Vollständige Unterstützung 18	Firefox Android Vollständige Unterstützung 4	Opera Android Vollständige Unterstützung Ja	Safari iOS Vollständige Unterstützung 4.2	Samsung Internet Android Vollständige Unterstützung 1.0
Accepts <number> / <number> or single <number> as a value.	Chrome Keine Unterstützung Nein	Edge Keine Unterstützung Nein	Firefox Vollständige Unterstützung 70	IE Keine Unterstützung Nein	Opera Keine Unterstützung Nein	Safari Keine Unterstützung Nein	WebView Android Keine Unterstützung Nein	Chrome Android Keine Unterstützung Nein	Firefox Android Keine Unterstützung Nein	Opera Android Keine Unterstützung Nein	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Keine Unterstützung Nein

Legende

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

Siehe auch

CSS Media Queries