Media queries avec Claude Code : guide CSS pratique
Implémentez du CSS responsive avec Claude Code : media queries, container queries, préférences et tests Playwright.
Une page peut sembler correcte sur un ordinateur portable et casser là où elle compte vraiment : lecture mobile, carte d’affiliation dans une colonne étroite, mode sombre ou écran d’administration utilisé toute la journée. Demander à Claude Code « rends cela responsive » reste trop vague. Il faut lui donner des règles de mise en page, des préférences utilisateur à respecter et des vérifications.
Une media query applique du CSS selon l’environnement du navigateur. Une container query applique du CSS selon la taille du conteneur parent du composant. prefers-reduced-motion et prefers-color-scheme servent à respecter les réglages du système. Les références primaires sont MDN CSS media queries, Using media queries, CSS container queries, CSSWG Media Queries Level 5, W3C CSS Containment Module Level 3 et Playwright emulation.
Pour les bases, voir aussi CSS Grid avec Claude Code, Flexbox, accessibilité et performance.
Règle de départ
Travaillez mobile-first. Le petit écran est le CSS de base, puis les écrans larges reçoivent des ajouts avec @media (width >= 48rem). Ne choisissez pas les ruptures par modèle d’appareil. Choisissez-les lorsque le contenu souffre : navigation qui passe mal à la ligne, carte trop serrée, publicité trop proche du texte ou formulaire difficile à lire.
| Critère | Media queries | Container queries |
|---|---|---|
| Ce qui est observé | Viewport, impression, préférences | Taille ou état du conteneur parent |
| Usage principal | Layout de page, navigation, espacements | Cartes, CTA, prix, composants réutilisables |
| Erreur fréquente | Trop de ruptures par appareil | Oubli de container-type |
| Prompt utile | « Change le layout selon le viewport » | « Change la carte selon sa largeur disponible » |
Cas d’usage
Pour un article de blog, empilez contenu, CTA et articles liés sur mobile. Ajoutez une barre latérale seulement quand la largeur le permet. Les cartes d’affiliation doivent utiliser des container queries pour rester propres dans le corps, la barre latérale et les blocs liés.
Pour une page de prix SaaS, une même carte peut apparaître sur la home, une landing et un checkout. Le viewport seul peut déclencher un layout large dans une colonne étroite.
Pour un tableau de bord, filtres, tableaux, export et recherche partagent l’espace. En petit écran, transformez la table en cartes; en grand écran, gardez les colonnes. prefers-reduced-motion est important pour les utilisateurs intensifs.
Pour un site monétisé, les CTA doivent rester visibles sans écraser la lecture. Les media queries gèrent le rythme de page; les container queries gèrent l’intérieur des CTA.
HTML/CSS copiable
Enregistrez ce fichier sous responsive-demo.html et ouvrez-le dans un navigateur. Il contient mobile-first, container queries, mode sombre, réduction du mouvement et typographie avec clamp(). Évitez font-size: 4vw, trop instable aux largeurs extrêmes.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Responsive media query demo</title>
<style>
:root { color-scheme: light dark; --bg: #f7f8fb; --surface: #ffffff; --text: #1f2937; --line: #d8dee8; --accent: #0f766e; --accent-strong: #115e59; --shadow: 0 12px 30px rgb(15 23 42 / 0.12); }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(1rem, 0.94rem + 0.25vw, 1.125rem); line-height: 1.7; color: var(--text); background: var(--bg); }
a { color: var(--accent-strong); }
.site-header { padding: 1rem; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 10; }
.nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; justify-content: space-between; max-width: 72rem; margin: 0 auto; }
.brand { font-weight: 800; }
.nav-links { display: flex; gap: 0.75rem; padding: 0; margin: 0; list-style: none; }
.page { width: min(100% - 2rem, 72rem); margin: 2rem auto; display: grid; gap: 1.5rem; }
.hero, .article, .sidebar-card, .offer { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.hero { padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); }
h1 { margin: 0 0 0.75rem; font-size: clamp(2rem, 1.65rem + 1.6vw, 3.2rem); line-height: 1.15; }
.layout { display: grid; gap: 1.5rem; }
.article, .sidebar-card { padding: 1rem; }
.sidebar { display: grid; gap: 1rem; align-content: start; }
.offer-wrap { container-type: inline-size; container-name: offer; }
.offer { display: grid; gap: 1rem; padding: 1rem; overflow: hidden; }
.offer-media { min-height: 10rem; border-radius: 6px; background: linear-gradient(135deg, rgb(15 118 110 / 0.85), rgb(37 99 235 / 0.75)), repeating-linear-gradient(45deg, rgb(255 255 255 / 0.18) 0 10px, transparent 10px 20px); }
.button { display: inline-flex; width: fit-content; min-height: 2.75rem; align-items: center; justify-content: center; padding: 0.7rem 1rem; border-radius: 6px; background: var(--accent); color: white; font-weight: 700; text-decoration: none; transition: transform 180ms ease, background-color 180ms ease; }
.button:hover { transform: translateY(-2px); background: var(--accent-strong); }
@media (width >= 48rem) { .article { padding: 1.5rem; } .layout { grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; } }
@media (width >= 72rem) { .layout { grid-template-columns: minmax(0, 2fr) minmax(18rem, 0.8fr); } }
@container offer (width >= 34rem) { .offer { grid-template-columns: 14rem minmax(0, 1fr); align-items: center; padding: 1.25rem; } }
@media (prefers-color-scheme: dark) { :root { --bg: #10151f; --surface: #18202d; --text: #eef2f7; --line: #334155; --accent: #2dd4bf; --accent-strong: #5eead4; --shadow: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }
</style>
</head>
<body>
<header class="site-header"><nav class="nav" aria-label="Main navigation"><div class="brand">ClaudeCodeLab</div><ul class="nav-links"><li><a href="#guide">Guide</a></li><li><a href="#offer">Template</a></li></ul></nav></header>
<main class="page"><section class="hero"><h1>Media queries that survive real layouts</h1><p>Mobile-first CSS, cartes en container queries, mode sombre et mouvement réduit.</p></section><div class="layout" id="guide"><article class="article"><h2>Readable article body</h2><p>The article stays readable on phones and gains a sidebar only when there is enough room.</p><div class="offer-wrap" id="offer"><section class="offer"><div class="offer-media" aria-hidden="true"></div><div><h2>Responsive review checklist</h2><p>Use this area for a download, newsletter or product CTA.</p><a class="button" href="#">Get the checklist</a></div></section></div></article><aside class="sidebar" aria-label="Related content"><section class="sidebar-card"><h2>Related</h2><p>Grid, Flexbox, accessibility and performance belong in the same review.</p></section></aside></div></main>
</body>
</html>
Prompts Claude Code
Objectif : CSS responsive pour la page article
Règles :
- Base mobile-first
- Media queries de viewport pour le layout global
- Container queries pour cartes et CTA réutilisables
- Pas de font-size uniquement en vw ; utiliser clamp()
- Respecter prefers-color-scheme et prefers-reduced-motion
Vérification :
- Tester 375, 768, 1024 et 1440 px
- Vérifier dark mode et reduced motion avec Playwright
- Signaler les breakpoints dupliqués ou inutiles
Relis ce diff comme du CSS responsive.
Priorité : overflow horizontal, texte illisible, CTA/pub écrasé,
container-type manquant, non-respect de reduced-motion, trop de breakpoints.
Retourne seulement les lignes concernées et les corrections minimales.
Vérification Playwright
import { test, expect } from "@playwright/test";
const fileUrl = "file:///absolute/path/to/responsive-demo.html";
for (const width of [375, 768, 1024, 1440]) {
test(`no horizontal overflow at ${width}px`, async ({ page }) => {
await page.setViewportSize({ width, height: 900 });
await page.goto(fileUrl);
const hasOverflow = await page.evaluate(() => document.documentElement.scrollWidth > document.documentElement.clientWidth);
await expect(hasOverflow).toBe(false);
await expect(page.locator(".offer")).toBeVisible();
});
}
test("dark mode keeps text readable", async ({ page }) => {
await page.emulateMedia({ colorScheme: "dark" });
await page.goto(fileUrl);
await expect(page.locator("body")).toHaveCSS("color", "rgb(238, 242, 247)");
});
test("reduced motion disables hover timing", async ({ page }) => {
await page.emulateMedia({ reducedMotion: "reduce" });
await page.goto(fileUrl);
const duration = await page.locator(".button").evaluate((el) => getComputedStyle(el).transitionDuration);
expect(duration).toBe("0.01ms");
});
flowchart TD
A["Base mobile-first"] --> B["Media queries pour le layout"]
B --> C["Container queries pour les cartes"]
C --> D["Préférences utilisateur"]
D --> E["Captures et overflow Playwright"]
E --> F["Prompt de revue Claude Code"]
Pièges et monétisation
Évitez d’empiler des max-width, d’utiliser le viewport pour un composant réutilisable, de régler la taille du texte avec vw seul et d’oublier reduced motion. Après génération par Claude Code, testez textes traduits, vrais CTA, mode sombre et largeur mobile.
Un CSS responsive protège les revenus : les offres restent visibles sans gêner la lecture. Placez un CTA discret au milieu pour une ressource gratuite, puis un CTA plus fort en fin d’article pour modèles ou accompagnement. Consultez la ressource gratuite, les produits ou le training Claude Code.
Dans le test pratique de Masa, le gain principal est venu du passage de la carte CTA en container query. La même carte a fonctionné dans le corps, la barre latérale et les articles liés sans nouveau breakpoint de viewport. Playwright a confirmé l’absence d’overflow à 375px, le texte lisible en mode sombre et la réduction du mouvement.
PDF gratuit: cheatsheet Claude Code
Saisissez votre email et téléchargez une page avec commandes, habitudes de review et workflow sûr.
Nous protégeons vos données et n'envoyons pas de spam.
À propos de l'auteur
Masa
Ingénieur spécialisé dans les workflows pratiques avec Claude Code.
Articles liés
Échelle de sécurité des permissions Claude Code
Passer du read-only aux éditions limitées, preuves et checks de déploiement sans perdre le contrôle.
Claude Code Small PR Proof Pack : rendre les petits changements reviewables
Un pack de preuve pour PR Claude Code : diff, vérifications, URL publique, CTA et rollback.
Gate de review avant commit avec Claude Code
Review avant commit avec Claude Code : diff, build, URL publique, liens Gumroad, CTA consultation, tests manquants et fichiers hors scope.