Maîtrise les media queries CSS pour le design responsive, incluant les stratégies de points de rupture, la combinaison de conditions, les approches mobile-first vs desktop-first, et les types de médias spécialisés comme print et orientation.
Les media queries te permettent d'appliquer des règles CSS conditionnellement en fonction des caractéristiques de l'appareil ou du viewport. La syntaxe de base est :
@media <media-type> and (<condition>) {
/* CSS rules */
}Les types de médias incluent :
screen — Pour les écrans (le plus courant).print — Pour les pages imprimées ou l'aperçu avant impression.all — Correspond à tous les types de médias (par défaut si omis).Les conditions les plus courantes testent la largeur du viewport :
/* S'applique quand le viewport fait au moins 768px de large */
@media (min-width: 768px) {
.container { max-width: 720px; }
}
/* S'applique quand le viewport fait au maximum 600px de large */
@media (max-width: 600px) {
.sidebar { display: none; }
}Mobile-first (recommandé) : Écris les styles de base pour les petits écrans, puis utilise des requêtes min-width pour ajouter de la complexité pour les écrans plus grands. Cette approche produit naturellement du CSS plus léger pour les appareils mobiles.
/* AND — les deux conditions doivent être vraies */
@media (min-width: 768px) and (max-width: 1024px) {
.tablet-only { display: block; }
}
/* OR — utilise une virgule pour séparer les alternatives */
@media (max-width: 600px), (orientation: portrait) {
.narrow-layout { flex-direction: column; }
}
/* NOT — inverse la requête entière */
@media not print {
.screen-only { display: block; }
}
/* Échelle de points de rupture courante */
/* sm: 640px — grands téléphones */
/* md: 768px — tablettes */
/* lg: 1024px — petits ordinateurs */
/* xl: 1280px — grands ordinateurs */
/* 2xl: 1536px — écrans extra larges */
/* Styles d'impression */
@media print {
.no-print { display: none; }
body { color: black; background: white; }
a { text-decoration: underline; }
}Au-delà de la largeur, les media queries peuvent tester de nombreuses fonctionnalités d'appareil et de préférences utilisateur :
Orientation :
@media (orientation: landscape) {
.hero { height: 50vh; }
}Préférences utilisateur :
/* Respecte le paramètre de mode sombre du système */
@media (prefers-color-scheme: dark) {
body { background: #0f172a; color: #e2e8f0; }
}
/* Respecte le paramètre de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}Capacité de survol :
/* Affiche les effets de survol uniquement sur les appareils qui supportent le survol */
@media (hover: hover) {
.card:hover { transform: translateY(-4px); }
}Résolution :
/* Écrans haute résolution (Retina) */
@media (min-resolution: 2dppx) {
.logo { background-image: url('logo@2x.png'); }
}Ces fonctionnalités modernes te permettent de créer des expériences qui s'adaptent non seulement à la taille de l'écran, mais aussi aux préférences utilisateur et aux capacités de l'appareil.
Dans une approche mobile-first, quel type de media query utilises-tu principalement ?