Claude Code से CSS Media Queries लागू करने की गाइड
Claude Code से responsive CSS, container queries, prefers settings और Playwright testing लागू करें।
कोई पेज आपके लैपटॉप पर ठीक दिख सकता है, लेकिन असली उपयोग में टूट सकता है: मोबाइल लेख में horizontal scroll, संकरी sidebar में दबा हुआ affiliate card, dark mode में कम contrast, या admin screen में बहुत ज्यादा animation। Claude Code को सिर्फ “responsive बना दो” कहना काफी नहीं है। उसे layout rules, user preferences और verification steps देने होंगे।
Media query वह CSS नियम है जो browser या device condition के आधार पर लागू होता है। Container query component के parent container की width देखकर style बदलती है। prefers-reduced-motion और prefers-color-scheme user की system settings का सम्मान करते हैं। Official references के लिए MDN CSS media queries, Using media queries, CSS container queries, CSSWG Media Queries Level 5, W3C CSS Containment Module Level 3 और Playwright emulation देखें।
Related articles: CSS Grid with Claude Code, Flexbox patterns, accessibility implementation और performance optimization।
मुख्य नियम
Mobile-first से शुरू करें। छोटी screen का layout normal CSS में लिखें, फिर @media (width >= 48rem) जैसे rules से बड़ी screens में layout बढ़ाएँ। Breakpoint device name से न चुनें। उसे वहाँ रखें जहाँ content खराब दिखने लगे: navigation टूटे, card बहुत तंग हो, ad text से चिपके, या form पढ़ना मुश्किल हो।
| निर्णय | Media queries | Container queries |
|---|---|---|
| क्या देखती हैं | Viewport, print, user preferences | Parent container की size या state |
| कहाँ बेहतर | Page layout, navigation, global spacing | Cards, CTA, pricing boxes, reusable UI |
| आम गलती | Device-based breakpoints बहुत ज्यादा | Parent पर container-type भूलना |
| Claude Code prompt | “Viewport width से page layout बदलो” | “Available card width से अंदर का layout बदलो” |
वास्तविक use cases
Blog article में mobile पर body, CTA और related posts को vertical रखें। Sidebar तभी जोड़ें जब जगह हो। Affiliate या product cards को container queries में रखें ताकि वही component body, sidebar और related section में ठीक रहे।
SaaS pricing page में एक ही pricing card home page, campaign page और checkout sidebar में आ सकता है। सिर्फ viewport media query से narrow sidebar में भी wide card layout लग सकता है।
Admin dashboard में filters, table, export button और search साथ आते हैं। Small screen में table को card list में बदलें, large screen में columns रखें। लंबे काम के लिए prefers-reduced-motion जरूरी है।
Monetized content में CTA दिखना चाहिए, लेकिन reading experience खराब नहीं होना चाहिए। Page rhythm media queries से और CTA के अंदर का layout container queries से संभालें।
Copy-paste runnable HTML/CSS
इसे responsive-demo.html के रूप में save करें और browser में खोलें। इसमें mobile-first CSS, container queries, dark mode, reduced motion और clamp() typography है। सिर्फ font-size: 4vw न लगाएँ; extreme widths में text बहुत बड़ा या छोटा हो सकता है।
<!doctype html>
<html lang="hi">
<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, container-aware cards, dark mode, and reduced motion.</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>
Claude Code prompts
Target: article detail page responsive CSS
Rules:
- Mobile-first base CSS
- Viewport media queries only for whole-page layout
- Container queries for reusable cards and CTAs
- Do not use font-size with vw alone; use clamp()
- Respect prefers-color-scheme and prefers-reduced-motion
Verification:
- Check 375, 768, 1024, 1440 px
- Check dark mode and reduced motion in Playwright
- Report duplicated or unnecessary breakpoints
इस diff को responsive CSS की तरह review करें।
Horizontal overflow, unreadable font size, crushed CTA/ad, missing container-type,
reduced-motion violation और breakpoint sprawl को priority दें।
सिर्फ line-specific issues और minimal fixes लौटाएँ।
Playwright verification
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["Mobile-first base CSS"] --> B["Page layout media queries"]
B --> C["Container queries for reusable cards"]
C --> D["User preference media features"]
D --> E["Playwright screenshots and overflow checks"]
E --> F["Claude Code review prompt"]
Pitfalls और monetization
लगातार max-width overrides न जोड़ें। Reusable card को सिर्फ viewport पर निर्भर न रखें। Font size में केवल vw न लगाएँ। Reduced motion को optional decoration न समझें। Claude Code के CSS बनाने के बाद translated copy, real ads, dark mode और narrow widths जरूर जाँचें।
Responsive CSS revenue को भी बचाता है, क्योंकि CTA visible रहता है और reading experience खराब नहीं होता। Article के बीच में free checklist CTA रखें और अंत में templates या consulting CTA दें। शुरुआत free resource से करें, reusable assets के लिए products देखें, और team rollout के लिए training देखें।
Masa के hands-on test में सबसे बड़ा सुधार CTA card को container query में बदलने से आया। वही card article body, sidebar और related section में बिना नए viewport breakpoint के फिट हुआ। Playwright ने 375px पर horizontal overflow न होने, dark mode text readable होने और reduced motion लागू होने की पुष्टि की।
मुफ़्त PDF: Claude Code cheatsheet
Email डालें और commands, review habits तथा safe workflow वाली एक-page PDF पाएँ.
हम आपका data सुरक्षित रखते हैं और spam नहीं भेजते.
लेखक के बारे में
Masa
Claude Code workflow और team adoption पर काम करने वाला engineer.
संबंधित लेख
Claude Code permission safety ladder: access धीरे-धीरे बढ़ाएं
read-only से limited edits, proof commands और deploy checks तक permission बढ़ाने की सुरक्षित ladder.
Claude Code Small PR Proof Pack: छोटे PR को review-ready बनाना
Claude Code PR के लिए diff, checks, public URL, CTA path और rollback वाला practical proof pack.
Claude Code Review Gate Before Commit: diff, test, public URL और CTA जांच
Claude Code से commit से पहले review gate बनाएं: diff, build, public URL, Gumroad, consultation, tests और unrelated files।