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

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?

CSS Animations & Transitions Cheat Sheet

Web Accessibility (WCAG) Cheat Sheet

Explore Topics

#ResponsiveWebDesign#ResponsiveWebDesignCheatSheet#WebDevelopment#Beginner#MediaQueries#FluidUnitsFlexbox#ResponsiveImages#CoreConcepts#Databases#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services