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

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple Oui Oui3.599.5 Oui
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui Oui Oui Oui Oui Oui Oui

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, fscholz, teoli, FredB
Dernière mise à jour par : SphinxKnight,