<resolution>
============

Le type de donnée CSS **`<resolution>`**, utilisé dans les *media queries*, décrit la densité de pixels d'un appareil d'affichage, c'est-à-dire sa résolution.

Les dimensions font référence aux unités CSS (un pixel CSS, un centimètre CSS, etc.) et non aux dimensions physiques.

Syntaxe
-------

Une valeur de ce type sera composée d'un nombre (une valeur de type `<number>`) immédiatement suivi d'une unité de résolution (`dpi`, `dpcm`, …). Comme pour les autres dimensions CSS, il n'y a aucun espace entre la valeur numérique et l'unité.

Bien que toutes les unités représentent la même chose pour la valeur `0`, l'unité ne peut être omise dans ce cas puisque ce n'est pas une donnée de type `<length>` : `0` est invalide et ne représente pas `0dpi`, `0dpcm`, ni `0dppx`.

### 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 CSS `in` et CSS `px` vaut 1:96, `1 dppx` est équivalent à `96 dpi`, ce qui correspond à la résolution par défaut des images affichées en CSS tel que défini par `image-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
--------

### Usage correct

Voici quelques exemples d'utilisation correcte de données de type `<resolution>` :


```css
96dpi                                              Usage correct : un <number> (ici un <integer>) suivi d'une unité.
@media print and (min-resolution: 300dpi) { ... }  Usage correct dans le contexte d'une media query.
```

### Usages incorrects


```css
72 dpi    Incorrect : les espaces ne sont pas acceptés entre le <number> et l'unité.
ten dpi   Incorrect : seules des expressions numériques sont acceptées.
0         Incorrect : l'unité ne peut être omise que pour l'expression de la valeur 0 de type <length>.
```

### Exemple appliqué

#### CSS


```css
/\* Saurez-vous trouver votre résolution en dpi \*/
/\* via l'exemple live ? \*/
@media screen and (min-resolution: 100dpi) {
  .exemple {
    background-color: palegreen;
  }
}

@media screen and (max-resolution: 99dpi) {
  .exemple {
    background-color: orange;
  }
}
```


#### HTML


```html
<p class="exemple">
  À ces mots le Chapelier ouvrit de grands yeux ; mais il se contenta de dire :
  « Pourquoi une pie ressemble-t-elle à un pupitre ? »
</p>
```


#### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Values and Units Module Level 4 # resolution |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Les *media queries* CSS
* La caractéristique média `resolution`