Archives CSS — Quand le design s'adapte
Date de consignation : Nuit du 18 mars — Écrans multiples, lumières bleues
Ou comment survivre à l'invasion des écrans
Le bureau était propre. Le code, aligné. Grid et Flexbox avaient fait leur travail. La page s'affichait parfaitement sur mon écran 27 pouces. Un chef-d'œuvre de pixels.
Puis le téléphone a sonné.
« Ça marche pas sur mon portable. »
« Le menu disparaît sur la tablette. »
« Les images débordent. »
Des voix dans la nuit. Chaque écran avait ses exigences, ses tailles, ses manières de voir le monde. On ne pouvait plus coder pour une seule fenêtre. Il fallait penser à toutes. En même temps.
C'est là que les Media Queries sont entrées en scène. Pas un outil, une philosophie. Une promesse : « Ton design s'adaptera. Ou il mourra. »
8.1 — MOBILE-FIRST VS DESKTOP-FIRST
Par où commencer l'enquête ?
📱 Mobile-First — Commencer petit
On code d'abord pour les mobiles. Le strict nécessaire. Puis on ajoute du confort pour les écrans plus grands.
/* PHASE 1 : Mobile (par défaut) */
.container { padding: 1rem; }
.menu { display: none; }
/* PHASE 2 : À partir de 768px (tablette) */
@media (min-width: 768px) {
.container { padding: 2rem; }
.menu { display: flex; }
}
/* PHASE 3 : À partir de 1024px (desktop) */
@media (min-width: 1024px) {
.container { max-width: 1200px; margin: 0 auto; }
}
Pourquoi ?
- Meilleures performances sur mobile (moins de CSS à charger)
- Priorité au contenu essentiel
- Plus facile à scale up qu'à réduire
🖥️ Desktop-First — L'ancienne méthode
On part du grand écran, puis on retire pour les petits.
/* PHASE 1 : Desktop (par défaut) */
.container { display: grid; grid-template-columns: 1fr 3fr; }
/* PHASE 2 : En dessous de 1024px (tablette) */
@media (max-width: 1023px) {
.container { grid-template-columns: 1fr; }
}
/* PHASE 3 : En dessous de 768px (mobile) */
@media (max-width: 767px) {
.container { padding: 1rem; }
}
La réalité : Aujourd'hui, on part du mobile. Les chiffres sont formels : plus de 60% du trafic vient des portables. Codez d'abord pour eux.
8.2 — LES BREAKPOINTS : LES FRONTIÈRES
Où le design change d'identité
Les breakpoints ne sont pas magiques. Ce sont des seuils. Des moments où votre layout dit : « Ici, ça ne marche plus. Il faut changer de plan. »
Points de rupture standards (approche mobile-first) :
/* Petit mobile (portrait) */
/* Pas besoin de media query : c'est le style par défaut */
/* Mobile (paysage) et tablette petite */
@media (min-width: 481px) {
/* Vos ajustements */
}
/* Tablette (portrait) */
@media (min-width: 768px) {
/* Changements majeurs ici souvent */
}
/* Tablette (paysage) et petit desktop */
@media (min-width: 1024px) {
/* Layout desktop classique */
}
/* Desktop large */
@media (min-width: 1200px) {
/* Le luxe : plus d'espace, on aère */
}
/* Écrans géants */
@media (min-width: 1600px) {
/* On limite parfois, pour pas que ça devienne ridicule */
}
La vérité : Vos breakpoints dépendent de votre contenu, pas d'un appareil spécifique. Utilisez les DevTools, redimensionnez la fenêtre, et ajoutez un breakpoint quand ça casse. C'est tout.
8.3 — IMAGES RESPONSIVES
Ne pas étrangler la bande passante
Une image de 2000px sur un écran 375px, c'est du gâchis. Et ça coûte cher en data.
Solution HTML : srcset et sizes
<img
src="image-small.jpg"
srcset="image-medium.jpg 800w,
image-large.jpg 1600w"
sizes="(max-width: 768px) 100vw,
(max-width: 1200px) 50vw,
800px"
alt="Description précise">
srcset: Liste des images disponibles et leur largeur réelle.sizes: Indique au navigateur quelle taille l'image occupera à l'écran.- Le navigateur choisit la meilleure. Intelligent.
Solution CSS : Le contrôle total
.responsive-img {
width: 100%;
height: auto; /* Garde les proportions */
max-width: 800px; /* Mais ne dépasse jamais cette taille */
}
.background-section {
background-image: url('small.jpg');
background-size: cover;
}
@media (min-width: 768px) {
.background-section {
background-image: url('large.jpg');
}
}
La règle : Jamais une image ne doit déborder de son conteneur. Jamais.
img, video, iframe {
max-width: 100%;
height: auto;
}
8.4 — CONTAINER QUERIES : LA RÉVOLUTION
Quand le composant décide pour lui-même
Les media queries regardent la fenêtre. Mais un composant dans une sidebar n'a pas besoin des mêmes styles que le même composant dans le contenu principal.
Entrez Container Queries. Le composant s'adapte à son espace disponible, pas à la fenêtre.
.card {
container-type: inline-size; /* On surveille la largeur */
container-name: card-container; /* Optionnel, pour cibler */
}
/* Quand le conteneur .card fait au moins 400px de large */
@container card-container (min-width: 400px) {
.card {
display: flex;
gap: 2rem;
}
.card img {
width: 150px;
}
}
/* Vous pouvez même cibler la hauteur */
@container (min-height: 300px) {
.card { border: 2px solid blue; }
}
Support navigateur : Bon en 2024. Vérifiez CanIUse. Le futur, c'est maintenant.
8.5 — DARK MODE : QUAND L'UTILISATEUR CHOISIT LA NUIT
prefers-color-scheme
Certains aiment la lumière. D'autres naviguent dans le noir. Respectez leur choix.
/* Variables CSS pour les deux thèmes */
:root {
--bg-color: white;
--text-color: black;
--primary: #007bff;
}
/* Détection du thème système sombre */
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #e0e0e0;
--primary: #0d6efd;
}
}
/* Application */
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease; /* Douceur */
}
/* Pour un switch manuel (classe ajoutée via JS) */
body.dark-mode {
--bg-color: #121212;
--text-color: #e0e0e0;
}
Astuce : Testez vos couleurs en sombre. Un gris clair sur blanc passe, sur noir, c'est aveuglant.
8.6 — AUTRES CAPTEURS UTILES
Ils savent plus de choses que vous ne le pensez
/* L'utilisateur préfère les animations réduites (accessibilité) */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* Écran haute densité (Retina) */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.logo {
background-image: url('logo@2x.png');
background-size: contain;
}
}
/* Orientation (portrait/paysage) */
@media (orientation: portrait) {
.hero { height: 70vh; }
}
@media (orientation: landscape) {
.hero { height: 90vh; }
}
/* Le pointeur est grossier (touch) vs fin (souris) */
@media (pointer: coarse) {
button, a { min-height: 44px; min-width: 44px; } /* Tappable area */
}
@media (hover: hover) {
.menu-item:hover { background: #eee; } /* Effects only if hover supported */
}
8.7 — CAS PRATIQUES : SUR LE TERRAIN
🟦 SCÈNE 1 : NAVBAR RESPONSIVE CLASSIQUE
.nav {
display: flex;
flex-direction: column;
padding: 1rem;
}
.menu-button {
align-self: flex-end;
display: block;
}
.nav-links {
display: none;
flex-direction: column;
}
.nav-links.active {
display: flex;
}
@media (min-width: 768px) {
.nav {
flex-direction: row;
justify-content: space-between;
}
.menu-button {
display: none;
}
.nav-links {
display: flex;
flex-direction: row;
gap: 2rem;
}
}
🟩 SCÈNE 2 : GRILLE QUI S'ADAPTE
.grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 600px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 900px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1200px) {
.grid {
grid-template-columns: repeat(4, 1fr);
}
}
🟥 SCÈNE 3 : TYPO RESPONSIVE
html {
font-size: 16px;
}
@media (min-width: 768px) {
html {
font-size: 17px;
}
}
@media (min-width: 1200px) {
html {
font-size: 18px;
}
}
/* Ou mieux, avec clamp() (CSS moderne) */
h1 {
font-size: clamp(1.75rem, 5vw, 3rem); /* Min, préféré, max */
}
8.8 — NOTES DE FIN D'ENQUÊTE
- Testez sur de vrais appareils : L'émulateur ment parfois.
- Mobile-first n'est pas "mobile-only" : Pensez aux tablettes, desktop, TV.
- Performance : Chaque media query ajoutée a un coût. Ne cassez pas tout à chaque breakpoint.
- Accessibilité :
prefers-reduced-motionest crucial. Respectez-le. - Container Queries : Apprenez-les. C'est l'avenir des composants indépendants.
- Dark mode : Ne le faites pas en afterthought. Planifiez-le dès le début avec des variables CSS.
Le principe fondamental : Votre site doit être lisible et utilisable sur un écran de 4 pouces comme sur un écran de 40 pouces. Tout le reste est détail.
Dernière lumière sur l'écran : 06:22.
Le téléphone, la tablette, le desktop — tous affichent la page.
Chacun à sa manière. Chacun avec ses règles.
Les media queries veillent. Elles ajustent, adaptent, transforment.
Le design respire. Il vit.
Demain, on parlera peut-être d'animations. De mouvement.
Mais pour ce soir, le site s'affiche. Partout.
Fin du dossier Media Queries & Responsive Design — Classé et archivé.