Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨juillet 2015⁩.

La caractéristique média CSS width peut être utilisée pour tester la largeur de la zone d'affichage (ou de la boîte de page, pour les médias paginés).

Syntaxe

width est une valeur décrivant la largeur d'affichage, les versions préfixées min-width et max-width peuvent également être utilisées afin de décrire la largeur minimale (resp. la largeur maximale).

Exemples

HTML

html
<div>
  Observez cet élément lorsque vous redimensionnez la largeur du viewport.
</div>

CSS

css
/* Largeur exacte */
@media (width: 360px) {
  div {
    color: red;
  }
}

/* Largeur minimale */
@media (min-width: 35rem) {
  div {
    background: yellow;
  }
}

/* Largeur maximale */
@media (max-width: 50rem) {
  div {
    border: 2px solid blue;
  }
}

Résultat

Spécifications

Specification
Media Queries Level 4
# width

Compatibilité des navigateurs

Voir aussi