<resolution>
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2022.
Le type de donnée CSS <resolution>, utilisé pour décrire les résolutions dans les requêtes média, désigne la densité de pixels d'un périphérique de sortie, c'est‑à‑dire sa résolution.
Sur les écrans, les unités se réfèrent aux pouces, centimètres ou pixels CSS, et non à des valeurs physiques.
Syntaxe
Le type de donnée <resolution> est composé d'un <number> strictement positif, suivi de l'une des unités listées ci‑dessous. Comme pour toutes les dimensions CSS, il n'y a pas d'espace entre le littéral d'unité et le nombre.
Unités
dpi-
Cette unité représente le nombre de points par pouce. Un écran compte habituellement 72 ou 96 ppi (dpi), tandis qu'un document imprimé en compte généralement un nombre beaucoup plus élevé. Puisque 1 pouce équivaut à 2,54 cm,
1 dpi ≈ 0,39 dpcm. dpcm-
Cette unité représente le nombre de points par centimètre. Puisque 1 pouce équivaut à 2.54 cm,
1dpcm ≈ 2,54 dpi. dppx-
Cette unité représente le nombre de points par unité CSS
px. Puisque le ratio entre les unités CSSinet CSSpxvaut 1:96,1 dppxest équivalent à96 dpi, ce qui correspond à la résolution par défaut des images affichées en CSS tel que défini parimage-resolution. x-
Un alias pour
dppx.
Note :
Bien que le nombre 0 représente la même mesure pour ces différentes unités. Si la valeur est écrite sans unité, elle sera considérée comme invalide. Autrement dit, 0 est invalide et ne représente pas 0dpi, 0dpcm ou 0dppx.
Exemples
Utilisation dans une requête média
@media print and (resolution >= 300dpi) {
/* … */
}
@media (resolution: 120dpcm) {
/* … */
}
@media (resolution >= 2dppx) {
/* … */
}
@media (resolution: 1x) {
/* … */
}
Résolutions valides
96dpi 50.82dpcm 3dppx
Résolutions invalides
72 dpi Les espaces ne sont pas autorisés entre le nombre et l'unité. ten dpi Le nombre doit être composé uniquement de chiffres. 0 L'unité est requise.
Spécifications
| Specification |
|---|
| CSS Values and Units Module Level 4 # resolution |
Compatibilité des navigateurs
Voir aussi
- La caractéristique média
resolution - La propriété
image-resolution - Utiliser les requêtes
@media