Responsive Web Design Cheat Sheet

Updated 2026-05-25

Next Topic: Sass and CSS Preprocessors Cheat Sheet

Responsive web design is the practice of creating websites that automatically adapt their layout, images, and typography to suit any screen size or device. Emerging from Ethan Marcotte's foundational work in 2010, responsive design has evolved into the standard approach for building flexible, device-agnostic web experiences. The core technique combines fluid grids, flexible images, and media queries to deliver content optimized for contexts ranging from smartphones to ultrawide monitors. Modern responsive design extends far beyond simple breakpoints: it embraces container queries for component-level responsiveness, new dynamic viewport units (svh, dvh) that solve long-standing mobile browser chrome issues, CSS logical properties for multi-directional layouts, and scroll-state queries that eliminate the need for JavaScript scroll listeners. A critical mindset shift is mobile-first design, where you build for the smallest screen first then progressively enhance for larger displays—ensuring performance and usability where constraints matter most.

What This Cheat Sheet Covers

This topic spans 19 focused tables and 135 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Core Responsive ConceptsTable 2: Media QueriesTable 3: CSS Flexbox for Responsive LayoutsTable 4: CSS Grid for Responsive LayoutsTable 5: Viewport and Relative UnitsTable 6: Fluid Sizing FunctionsTable 7: Container QueriesTable 8: Container Scroll-State QueriesTable 9: Responsive ImagesTable 10: Responsive TypographyTable 11: Responsive Layout PatternsTable 12: CSS Logical PropertiesTable 13: Touch and Mobile OptimizationTable 14: Responsive TablesTable 15: Modern CSS SelectorsTable 16: CSS NestingTable 17: CSS Scroll-Driven AnimationsTable 18: Entry and Exit AnimationsTable 19: Accessibility Considerations

Table 1: Core Responsive Concepts

The foundational mental models and HTML setup that every responsive project depends on. Understanding these before touching CSS prevents the most common device-rendering mistakes.

Concept	Example	Description
Mobile-first design	`@media (min-width: 768px) { ... }`	• Design strategy starting with mobile layouts first, then adding styles for larger screens using `min-width` queries • ensures performance and accessibility on constrained devices
Viewport meta tag	`<meta name="viewport" content="width=device-width, initial-scale=1">`	• Essential HTML tag that controls layout viewport width and initial zoom level • without it, mobile browsers render desktop layouts at tiny scale
Fluid layout	`.container { width: 100%; max-width: 1200px; }`	Uses percentage-based widths and relative units instead of fixed pixels, allowing content to scale proportionally across different viewport sizes.

Table 1: Core Responsive Concepts

The foundational mental models and HTML setup that every responsive project depends on. Understanding these before touching CSS prevents the most common device-rendering mistakes.

Concept	Example	Description
Mobile-first design	`@media (min-width: 768px) { ... }`	• Design strategy starting with mobile layouts first, then adding styles for larger screens using `min-width` queries • ensures performance and accessibility on constrained devices
Viewport meta tag	`<meta name="viewport" content="width=device-width, initial-scale=1">`	• Essential HTML tag that controls layout viewport width and initial zoom level • without it, mobile browsers render desktop layouts at tiny scale
Fluid layout	`.container { width: 100%; max-width: 1200px; }`	Uses percentage-based widths and relative units instead of fixed pixels, allowing content to scale proportionally across different viewport sizes.