<ratio>

Le type de donnée CSS <ratio> permet de décrire les proportions dans les media queries (N.D.T. pour « requête média » qui est moins usité). entre deux valeurs sans unité.

Syntaxe

Une valeur de ce type se compose d'un entier strictement positif (type <integer>, suivi d'une barre oblique ('/', Unicode U+002F SOLIDUS) puis d'un second entier strictement positif (type <integer>). Il est possible d'avoir des espaces avant et après la barre oblique.

Exemples

Utiliser dans une media query

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

Ratios fréquemment utilisés

  Ratio Utilisation
Ratio4_3.png 4/3 Format traditionnel utilisé par les télévisions au XXe siècle.
Ratio16_9.png 16/9 Format « moderne » des télévisions.
Ratio1_1.85.png 185/100 = 91/50
(les numérateurs et dénominateurs décimaux ne sont pas autorisés)
Le format le plus utilisé pour la projection de films depuis les années 1960.
Ratio1_2.39.png 239/100
(les numérateurs et dénominateurs décimaux ne sont pas autorisés)
Le format « large » utilisé pour projeter certains films (on parle de format anamorphique).

Exemple appliqué

CSS

@media screen and (min-aspect-ratio: 1/1) {
  .exemple {
    background-color: palegreen;
  }
}

HTML

<p class="exemple">
  Essayez de m'étirer en longueur ou de me réduire en largeur
</p>

Résultat

Spécifications

Spécification État Commentaires
Media Queries
La définition de '<ratio>' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
<ratio>Chrome Support complet 3Edge Support complet 12Firefox Support complet 3.5IE Support complet 9Opera Support complet 9.5Safari Support complet 4.1WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 4.2Samsung Internet Android Support complet 1.0
Accepts <number> / <number> or single <number> as a value.Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 70IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Voir aussi