Responsive Web Design Cheat Sheet
Covers mobile-first media queries, fluid layout units, responsive images with srcset, and core responsive design concepts.
2 PagesBeginnerMar 15, 2026
Media Queries
Mobile-first breakpoints and feature queries.
css
/* Mobile-first: base styles apply to the smallest screens */.container { padding: 1rem;}@media (min-width: 640px) { /* small tablets and up */ .container { padding: 2rem; }}@media (min-width: 1024px) { /* desktop */ .container { max-width: 960px; margin: 0 auto; }}@media (orientation: landscape) { /* ... */ }@media (prefers-color-scheme: dark) { body { background: #111; } }
Fluid Units & Flexbox
Layout and typography that scale smoothly.
css
.wrapper { display: flex; flex-wrap: wrap; gap: 1rem;}.card { flex: 1 1 300px; /* grow, shrink, basis 300px - wraps naturally */}.text { font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem); /* fluid typography */ width: min(90%, 800px); /* fluid max-width */}
Responsive Images
Serving the right image size and format per device.
html
<img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw" alt="Description" loading="lazy"/><picture> <source media="(min-width: 800px)" srcset="hero-large.webp" type="image/webp"> <source media="(max-width: 799px)" srcset="hero-small.webp" type="image/webp"> <img src="hero-fallback.jpg" alt="Hero"></picture>
Core Concepts
Foundational responsive design terminology.
- viewport meta tag- setting width=device-width and initial-scale=1 makes mobile browsers render at the device's actual width instead of a virtual desktop-sized viewport
- mobile-first- write base styles for small screens, then layer on complexity via min-width queries
- breakpoint- a viewport width at which the layout changes
- srcset/sizes- lets the browser choose the best image resolution for the viewport and pixel density
- container queries (@container)- style an element based on a parent container's size rather than the viewport
- rem/em vs px- relative units that scale with root or parent font size, improving accessibility
Container Queries
Styling a component based on its own containing box rather than the viewport, so it's reusable in any layout slot.
css
.card-slot { container-type: inline-size; container-name: card;}@container card (min-width: 400px) { .card { grid-template-columns: 120px 1fr; } .card__title { font-size: 1.25rem; }}/* container query length units scale with the container, not the viewport */.card__pad { padding: 2cqi; /* 2% of the container's inline size */}
Dynamic Viewport Units & aspect-ratio
Fixing the classic mobile 100vh-covered-by-browser-chrome bug and sizing media without layout shift.
css
/* svh = smallest possible viewport (chrome visible), lvh = largest (chrome hidden), dvh = dynamically tracks the current chrome state */.hero { min-height: 100dvh; /* resizes as the mobile address bar shows/hides */}.video-embed { width: 100%; aspect-ratio: 16 / 9; /* reserves space before the iframe/video loads: no CLS */}
:has() and Logical Properties
Style-based parent queries and writing-mode-aware spacing for responsive, i18n-safe layouts.
css
/* style a form differently once it contains an invalid field - no JS class toggling */form:has(:invalid) .submit-btn { opacity: 0.5; pointer-events: none;}/* a card layout that reflows when it directly contains an image */.card:has(> img) { grid-template-rows: auto 1fr;}/* logical properties flip automatically in RTL locales, unlike left/right */.panel { margin-inline-start: 1rem; padding-block: 1rem 2rem; border-inline-end: 1px solid #ddd;}
Advanced Responsive Vocabulary
Terms for component-level and performance-aware responsive design.
- container queries (@container)- query a component's own box size/style rather than the viewport, enabling truly reusable components
- cqw / cqi / cqb units- lengths relative to a query container's width, inline size, or block size, analogous to vw but scoped to the container
- dvh / svh / lvh- viewport-height units that account for mobile browser chrome showing or hiding, replacing the buggy 100vh
- :has()- a relational pseudo-class that styles an element based on its descendants or siblings, enabling parent selectors
- content-visibility: auto- skips layout/paint work for off-screen content, dramatically speeding up long pages
- prefers-reduced-data- media feature signaling the user wants lower-bandwidth assets (e.g. skip large hero video)
- logical properties- inline/block-relative properties (margin-inline, padding-block) that adapt automatically to writing direction
content-visibility for Long Pages
Deferring rendering cost of off-screen sections while reserving approximate space to avoid scrollbar jumps.
css
.below-fold-section { content-visibility: auto; contain-intrinsic-size: auto 800px; /* placeholder height until rendered */}/* pairs well with lazy-loaded images inside the section */.below-fold-section img { loading: lazy;}
Pro Tip
Design mobile-first with min-width media queries rather than max-width: it keeps your base CSS simpler with fewer overrides, and matches how progressive enhancement naturally layers complexity onto larger screens.
Was this cheat sheet helpful?
Explore Topics
#ResponsiveWebDesign#ResponsiveWebDesignCheatSheet#WebDevelopment#Beginner#MediaQueries#FluidUnitsFlexbox#ResponsiveImages#CoreConcepts#Databases#CheatSheet#SkillVeris
