Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Caractéristique média CSS width
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis 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
<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 |
|---|
| Media Queries Level 4 # width |
Compatibilité des navigateurs
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Voir aussi
- Utiliser les requêtes média
- La règle
@media
Aider à améliorer MDN
Cette page a été modifiée le par les contributeur·ice·s du MDN.