Media Queries CSS : Maîtrisez le Responsive Design de A à Z

Comprendre les Media Queries CSS en 2026

Les media queries CSS sont le pilier fondamental du responsive design. Elles permettent d'appliquer des styles CSS conditionnellement en fonction des caractéristiques de l'appareil de l'utilisateur : largeur d'écran, orientation, résolution, préférences système, et bien plus encore.

Depuis leur introduction dans CSS3, les media queries ont considérablement évolué. En 2026, elles offrent des possibilités bien au-delà du simple redimensionnement, avec les container queries, les preference queries et les interaction queries.

Syntaxe de base des Media Queries

La règle @media

La syntaxe fondamentale d'une media query utilise la règle @media :

/* Syntaxe de base */
@media type and (condition) {
    /* Styles appliqués si la condition est vraie */
}

/* Exemples concrets */
@media screen and (max-width: 768px) {
    .container { padding: 1rem; }
    .sidebar { display: none; }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .container { max-width: 960px; }
}

@media screen and (min-width: 1025px) {
    .container { max-width: 1200px; }
}

Les types de média

Les breakpoints essentiels en 2026

Voici les breakpoints que nous recommandons chez Tourak Digital pour couvrir la majorité des appareils :

/* Mobile first - Breakpoints recommandés 2026 */

/* Extra small: 0 - 575px (téléphones portrait) */
/* Styles par défaut - pas de media query nécessaire */

/* Small: 576px+ (téléphones paysage) */
@media (min-width: 576px) {
    .container { max-width: 540px; }
}

/* Medium: 768px+ (tablettes portrait) */
@media (min-width: 768px) {
    .container { max-width: 720px; }
    .grid-2col { grid-template-columns: 1fr 1fr; }
}

/* Large: 992px+ (tablettes paysage, petits laptops) */
@media (min-width: 992px) {
    .container { max-width: 960px; }
    .grid-3col { grid-template-columns: repeat(3, 1fr); }
}

/* Extra large: 1200px+ (desktops) */
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

/* XXL: 1400px+ (grands écrans) */
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

Approche Mobile First vs Desktop First

Mobile First (recommandé)

L'approche mobile first commence par les styles mobiles, puis ajoute progressivement des styles pour les écrans plus grands avec min-width :

/* Mobile first : styles de base pour mobile */
.nav { flex-direction: column; }
.sidebar { display: none; }

/* Puis on ajoute pour les écrans plus grands */
@media (min-width: 768px) {
    .nav { flex-direction: row; }
    .sidebar { display: block; width: 250px; }
}

Desktop First

L'approche inverse commence par les styles desktop et adapte vers le mobile avec max-width :

/* Desktop first : styles de base pour desktop */
.nav { flex-direction: row; }
.sidebar { display: block; width: 250px; }

/* Puis on adapte pour les mobiles */
@media (max-width: 767px) {
    .nav { flex-direction: column; }
    .sidebar { display: none; }
}

Media Queries avancées en 2026

Préférences utilisateur

/* Mode sombre */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a2e;
        --text-color: #e0e0e0;
    }
}

/* Réduction des animations */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* Contraste élevé */
@media (prefers-contrast: high) {
    :root {
        --text-color: #000;
        --bg-color: #fff;
        --border-color: #000;
    }
}

/* Économie de données */
@media (prefers-reduced-data: reduce) {
    .hero-video { display: none; }
    .bg-image { background-image: none; }
}

Container Queries (la révolution de 2026)

Les container queries permettent d'adapter les styles en fonction de la taille du conteneur parent, pas de la fenêtre :

/* Définir un conteneur */
.card-container {
    container-type: inline-size;
    container-name: card;
}

/* Styles basés sur la taille du conteneur */
@container card (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: 1rem;
    }
}

@container card (min-width: 600px) {
    .card { grid-template-columns: 250px 1fr; }
    .card-title { font-size: 1.5rem; }
}

Orientation et résolution

/* Orientation */
@media (orientation: landscape) {
    .gallery { grid-template-columns: repeat(4, 1fr); }
}
@media (orientation: portrait) {
    .gallery { grid-template-columns: repeat(2, 1fr); }
}

/* Écrans haute résolution (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo { background-image: url('logo@2x.png'); }
}

/* Hover capability */
@media (hover: hover) {
    .button:hover { transform: scale(1.05); }
}
@media (hover: none) {
    .button { padding: 1rem; /* plus grand pour le touch */ }
}

Opérateurs logiques dans les Media Queries

/* AND : toutes les conditions doivent être vraies */
@media screen and (min-width: 768px) and (orientation: landscape) { }

/* OR (virgule) : au moins une condition vraie */
@media (max-width: 600px), (orientation: portrait) { }

/* NOT : inverse la condition */
@media not print { }

/* ONLY : empêche les anciens navigateurs d'appliquer les styles */
@media only screen and (min-width: 768px) { }

/* Range syntax (moderne, 2026) */
@media (400px <= width <= 800px) {
    /* Entre 400px et 800px */
}
@media (width >= 1200px) {
    /* 1200px et plus */
}

Exemple concret : Header responsive complet

/* Base mobile */
.header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}
.nav-toggle { display: block; cursor: pointer; font-size: 1.5rem; }
.nav-menu {
    display: none;
    width: 100%;
    flex-direction: column;
}
.nav-menu.active { display: flex; }
.nav-link { padding: 0.75rem 0; border-bottom: 1px solid #eee; }

/* Tablette */
@media (min-width: 768px) {
    .nav-toggle { display: none; }
    .nav-menu {
        display: flex !important;
        width: auto;
        flex-direction: row;
        gap: 1.5rem;
    }
    .nav-link { padding: 0; border: none; }
}

/* Desktop */
@media (min-width: 1024px) {
    .header { padding: 1rem 3rem; }
    .nav-link { font-size: 1.1rem; }
}

Bonnes pratiques des Media Queries en 2026

• Adoptez le mobile first : commencez toujours par les styles mobiles, c'est plus performant et logique.
• Utilisez des unités relatives : préférez em ou rem aux pixels dans vos breakpoints pour respecter le zoom utilisateur.
• Ne créez pas trop de breakpoints : 4 à 5 breakpoints suffisent pour la majorité des projets.
• Testez sur de vrais appareils : les émulateurs ne reproduisent pas toujours fidèlement le comportement réel.
• Utilisez les container queries quand c'est possible pour des composants vraiment réutilisables.
• Pensez à l'accessibilité avec prefers-reduced-motion et prefers-color-scheme.
• Regroupez vos media queries en bas de votre fichier CSS ou utilisez un préprocesseur pour les organiser.

Outils pour tester vos Media Queries

Conclusion

Les media queries CSS restent en 2026 l'outil incontournable du responsive design. Avec les nouvelles fonctionnalités comme les container queries et les preference queries, elles offrent un contrôle sans précédent sur l'adaptation de vos interfaces. Adoptez l'approche mobile first, utilisez des breakpoints pertinents et n'oubliez pas l'accessibilité.

Chez Tourak Digital, nous concevons chaque site avec une approche responsive rigoureuse. Contactez-nous pour un site parfaitement adapté à tous les écrans.