<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 | |
---|---|---|
![]() |
4/3 |
Format traditionnel utilisé par les télévisions au XXe siècle. |
![]() |
16/9 |
Format « moderne » des télévisions. |
![]() |
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. |
![]() |
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
BCD tables only load in the browser