MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

width est une caractéristique média CSS (cf. @media) qui permet d'appliquer des styles différents en fonction de la largeur de la zone d'affichage (viewport). La largeur est exprimée comme une longueur CSS (type <length>.

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).

/* Largeur exacte */
@media (width: 300px) {}

/* Un viewport avec une largeur minimale */
@media (min-width: 50em) {}

/* Un viewport avec une largeur maximale */
@media (max-width: 1000px) {}

Exemples

HTML

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

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

Spécification État Commentaires
Media Queries Level 4
La définition de 'width' dans cette spécification.
Version de travail La valeur peut désormais être négative (ce qui correspond à un booléen faux).
Media Queries
La définition de 'width' dans cette spécification.
Recommendation Définition initiale. La valeur ne peut pas être négative.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple (Oui) (Oui) 9.0 (Oui) (Oui)
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple ? ? ? ? ?

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,