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) ou de la largeur de la page (pour les média paginés). 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.
Candidat au statut de recommandation 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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
width media featureChrome Support complet OuiEdge Support complet 12Firefox Support complet 2IE Support complet 9Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet 4Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Étiquettes et contributeurs liés au document

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