Les Media Queries sont des outils CSS3 permettant de créer des styles conditionnels basés sur les caractéristiques de l'appareil affichant un site web, comme la largeur de l’écran, la hauteur, la résolution, etc.
Elles sont essentielles pour le développement de design web responsive, s'adaptant aux différents appareils.
Une Media Query se compose d'un type de média et d'une ou plusieurs expressions qui vérifient les conditions de styles. Voici un exemple basique :
@media screen and (min-width: 600px) {
/* Ici le code si la condition est vérifiée */
body {
background-color: lightblue;
}
}
Ce code applique un arrière-plan lightblue lorsque la largeur de l'écran est d'au moins 600 pixels.
Les points d'arrêt (breakpoints) sont les seuils à partir desquels la mise en page doit s'adapter pour offrir une expérience utilisateur optimale sur différents appareils. Il est important de choisir des breakpoints pertinents en fonction de la cible et du contenu du site. Voici quelques exemples de breakpoints couramment utilisés :
/* Petits appareils (mobiles, 600px et plus) */
@media (min-width: 600px) {
body {
font-size: 0.9rem;
}
}
/* Tablettes (768px et plus) */
@media (min-width: 768px) {
body {
font-size: 1rem;
}
}
/* Petits ordinateurs de bureau (1024px et plus) */
@media (min-width: 1024px) {
body {
font-size: 1.1rem;
}
}
/* Grands ordinateurs de bureau (1200px et plus) */
@media (min-width: 1200px) {
body {
font-size: 1.2rem;
}
}
Pour adapter la mise en page, les médias et les typographies, utilisez des unités relatives et flexibles, comme em, rem, %, et le vw/vh.
% ou utilisez max-width: 100% pour qu'elles ne dépassent pas leur conteneur. Ainsi les images respecteront la taille de leur parent, et ne créeront aucuns débordements.em ou vw pour qu'elles s'adaptent à la largeur de l'écran, ainsi l'affichage entre différents formats d'appareils sera compatible et respectera les normes d'accessibilité recommandées.Les Media Queries sont essentielles pour créer un site web réactif. Elles permettent d’ajuster la mise en page, la taille des éléments, et la visibilité des contenus selon les dimensions et caractéristiques de l’appareil utilisé.
Cette formation est proposée par Deladev, studio web de Loïc D. — création de sites et d'applications, accompagnement et formation sur mesure.
Les projets réalisés · Prestations et tarifs · Le blog tech · Me contacter
Écrite par Loïc D. avec l'assistance de Claude (Anthropic) — un travail à deux.
© 2026 Deladev — publiée sous licence CC BY-NC-ND 4.0. Vous pouvez la lire, y renvoyer par un lien, la partager et la citer en créditant la source. La revendre, l'utiliser dans une prestation ou une formation payante, la republier même partiellement ailleurs, en diffuser une version modifiée ou l'exploiter pour entraîner un modèle d'IA nécessitent une autorisation écrite — pour un usage interne en entreprise, c'est souvent oui, il suffit de demander.