width
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
Specification |
---|
Media Queries Level 4 # width |
Compatibilité des navigateurs
BCD tables only load in the browser