AI Rules for Responsive Design

AI Designs for One Screen Size

AI generates layouts with: fixed pixel widths (width: 1200px), desktop-first media queries (styles break on mobile instead of building from mobile), no fluid sizing (text and spacing do not scale between breakpoints), no touch consideration (tiny click targets, hover-only interactions), and no viewport meta tag (mobile browsers render at desktop width and zoom out). Over 60% of web traffic is mobile — AI designs for the other 40%.

Modern responsive design is: mobile-first (base styles for mobile, breakpoints add desktop complexity), fluid (clamp() for typography and spacing that scales smoothly), container-query-aware (components respond to their container, not the viewport), touch-friendly (44px minimum touch targets, no hover-only interactions), and viewport-configured (meta viewport for proper mobile rendering). AI generates none of these.

These rules cover: mobile-first breakpoints, fluid typography with clamp(), container queries, responsive images, touch target sizing, and viewport configuration.

Rule 1: Mobile-First Breakpoints

The rule: 'Write base styles for mobile, then add complexity at larger breakpoints with min-width media queries. Mobile-first: .card { padding: 1rem; } @media (min-width: 768px) { .card { padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; } }. The mobile layout is the default (simple, single column). Larger screens enhance it (more padding, grid layout). In Tailwind CSS 4: classes are mobile-first by default; md: and lg: prefixes add larger-screen styles.'

For breakpoint selection: 'Use content-driven breakpoints, not device-driven. Instead of: 768px = iPad, 1024px = desktop. Use: set a breakpoint where your content needs to reflow. If a two-column layout becomes too narrow at 640px, add a breakpoint at 640px. Three to five breakpoints cover most layouts: sm (640px), md (768px), lg (1024px), xl (1280px). Tailwind CSS provides these as defaults.'

AI generates: desktop-first with max-width: @media (max-width: 768px) { .sidebar { display: none; } } — hide elements on mobile instead of progressively enhancing. This approach leads to: more CSS (you write desktop styles then override for mobile), hidden content (mobile users miss features instead of getting adapted versions), and harder maintenance (two sets of styles fighting each other).

• Mobile-first: base styles for mobile, min-width breakpoints for larger screens
• Tailwind CSS: mobile classes are default, md:/lg:/xl: for larger screens
• Content-driven breakpoints: where your layout needs to change, not device sizes
• 3-5 breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)
• Progressive enhancement: add complexity for larger screens, do not hide for smaller

Rule 2: Fluid Typography with clamp()

The rule: 'Use CSS clamp() for typography that scales smoothly between breakpoints: font-size: clamp(1rem, 0.5rem + 1.5vw, 2rem). The text is: minimum 1rem (16px) on small screens, scales with viewport width (1.5vw), and maximum 2rem (32px) on large screens. No media queries needed — the font size transitions smoothly. Apply to: headings, body text, spacing, and padding.'

For the formula: 'clamp(min, preferred, max). Preferred value: combination of a fixed value and a viewport unit. Common pattern: clamp(1rem, 0.5rem + 2vw, 3rem) for headings. The fixed value (0.5rem) prevents the text from collapsing to near-zero on very small viewports. The viewport unit (2vw) provides the scaling. Use clamp-calculator tools (utopia.fyi) to generate values for a type scale.'

AI generates: h1 { font-size: 48px; } — fixed size, too large for mobile, too small for 4K displays. Or: h1 { font-size: 3vw; } — scales with viewport but has no minimum (unreadable on small screens) and no maximum (enormous on large screens). clamp() sets both guardrails: always readable, always proportional, smooth scaling in between.

Rule 3: Container Queries for Component-Level Responsiveness

The rule: 'Use container queries when a component needs to respond to its container size, not the viewport size. A card component in a sidebar (300px) and a main content area (800px) should look different — based on the container width, not the viewport. CSS: .card-container { container-type: inline-size; } @container (min-width: 400px) { .card { display: grid; grid-template-columns: 1fr 2fr; } }.'

For when to use container vs media queries: 'Media queries: page-level layout decisions (sidebar visible, grid columns, navigation style). Container queries: component-level layout decisions (card layout, widget density, text truncation). The rule of thumb: if the component is reused in different-sized containers on the same page, use container queries. If it always occupies the same proportion of the viewport, media queries work.'

AI generates: media queries for everything, including components that appear in multiple contexts. A card that looks great at @media (min-width: 768px) breaks when placed in a narrow sidebar on a wide screen. Container queries: the card adapts to its actual available space, regardless of viewport size. Component-level responsiveness instead of page-level assumptions.

Rule 4: Touch Target Sizing

The rule: 'All interactive elements must have a minimum touch target of 44x44 CSS pixels (Apple HIG) or 48x48dp (Material Design). This includes: buttons, links, form inputs, checkboxes, radio buttons, and close buttons. If the visual element is smaller than 44px (an icon button), use padding to extend the touch target: .icon-button { padding: 12px; } — the 20px icon + 24px padding = 44px touch target.'

For spacing between targets: 'Adjacent touch targets must have at least 8px of spacing between them. Without spacing: users accidentally tap the wrong target (especially on mobile with imprecise thumb input). Navigation bars with closely-spaced links, action buttons in toolbars, and list items with actions are common violators. Minimum 8px gap or visual separator between adjacent interactive elements.'

AI generates: buttons with no padding (24px text, no touch padding), links in paragraphs with no tap area extension, and close buttons that are 16x16px (impossible to tap accurately on mobile). 44px minimum is not a suggestion — it is the threshold for usable touch interaction. Below 44px: error rates increase significantly, user frustration rises, and accessibility is compromised.

• Minimum 44x44px touch targets — Apple HIG standard, Material Design uses 48x48dp
• Padding extends touch target: 20px icon + 24px padding = 44px target
• 8px minimum spacing between adjacent touch targets
• No hover-only interactions — everything must work with tap
• Test on real mobile devices — emulators do not test finger accuracy

Rule 5: Viewport Meta and Safe Areas

The rule: 'Include the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1" />. Without it: mobile browsers render at 980px (desktop width) and zoom out, making everything tiny. With it: the browser renders at the device width, and your responsive CSS works as intended. Never use maximum-scale=1 or user-scalable=no — these disable zoom accessibility.'

For safe areas: 'Modern phones with notches and rounded corners have safe area insets. Use CSS env(): padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom). The viewport-fit=cover meta tag enables edge-to-edge rendering: <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />. Then use env() to pad content away from the notch and home indicator.'

AI generates: no viewport meta tag (mobile renders at desktop width), or width=device-width, initial-scale=1, maximum-scale=1 (disables pinch-to-zoom — accessibility violation). The correct tag is simple: width=device-width, initial-scale=1. Two attributes. Add viewport-fit=cover and env() padding for notch-aware layouts.

Complete Responsive Design Rules Template

Consolidated rules for responsive design.

• Mobile-first: base styles for mobile, min-width breakpoints for larger screens
• Fluid typography: clamp(min, preferred, max) — smooth scaling, no media queries
• Container queries for components: adapt to container size, not viewport
• 44x44px minimum touch targets — padding extends visual elements to target size
• 8px spacing between adjacent touch targets — prevent accidental taps
• Viewport meta: width=device-width, initial-scale=1 — never disable zoom
• Safe area insets: env(safe-area-inset-*) for notch-aware layouts
• No hover-only interactions — everything must work with touch input