Responsive Design — Cheat Sheet

Tags: css, responsive-design, media-queries, flexbox, grid, mobile-first, viewport

Level: intermediate

TL;DR: Core principles, fluid layouts, modern media queries, and responsive assets for seamless multi-device interfaces.

Key concepts

Fluid grids scale layout containers proportionally using percentages, fr, or minmax() instead of fixed pixels.

The viewport meta tag ensures mobile browsers match layout width to physical device screen width.

Mobile-first approach defines base styles for small viewports and enhances via min-width media queries.

Modern CSS media queries support range syntax like @media (width >= 768px) for readability.

Fluid typography leverages clamp(MIN, VAL, MAX) to scale font sizes smoothly between viewports without media queries.

Container queries (@container) adapt components based on parent container width rather than overall viewport dimensions.

Flexible media prevents layout breaks by enforcing max-width: 100% and height: auto on images and videos.

Modern CSS layout engines (Flexbox and CSS Grid) handle alignment, wrapping, and flow natively across screen sizes.

Touch targets should maintain a minimum interactive hit area of 44x44px for accessible mobile interaction.

Typical questions and ready answers

Q: How do you structure a mobile-first responsive stylesheet?R: I define core baseline styles without media queries for mobile devices, then progressively layer complexity and layout overrides using min-width queries for tablets and desktops.

Q: What is the difference between media queries and container queries?R: Media queries adapt layouts based on global viewport dimensions, while container queries evaluate the immediate parent container's size, enabling truly modular and portable components.

Q: How do you handle high-density screens and responsive images effectively?R: I use modern formats like WebP or AVIF via <picture> and srcset with sizes, allowing the browser to select optimal image resolution based on display pixel density and rendered slot size.

Pitfalls and common mistakes

Omitting the viewport meta tag, which causes mobile browsers to emulate desktop views at 980px.

Using hardcoded pixel widths on parent containers, breaking fluid responsiveness on narrower screens.

Designing for specific device resolutions instead of placing breakpoints where the layout naturally breaks.

Relying exclusively on CSS hiding (display: none) instead of serving lighter markup and assets to mobile clients.

Ignoring viewport height constraints, causing sticky footers and dialogs to overlap interactive content on short screens.

Setting explicit widths without configuring box-sizing: border-box, leading to unexpected horizontal scrollbars.

Snippets and commands

<!-- Essential viewport meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS

/* Box sizing reset & fluid media baseline */
*, *::before, *::after {
  box-sizing: border-box;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Fluid typography using clamp: clamp(min, preferred, max) */
h1 {
  font-size: clamp(1.75rem, 1.25rem + 2.5vw, 3rem);
}

/* Modern range media query (mobile-first enhancement) */
@media (width >= 768px) {
  .grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
  }
}

/* Container query pattern */
.card-container {
  container-type: inline-size;
}

@container (width >= 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

HTML

<!-- Responsive image with srcset and sizes -->
<picture>
  <source type="image/avif" srcset="hero-400.avif 400w, hero-800.avif 800w" sizes="(max-width: 600px) 100vw, 50vw">
  <img src="hero-800.jpg" alt="Dashboard preview" width="800" height="450" loading="lazy">
</picture>

To review

[ ] CSS Container Queries syntax and browser support matrices

[ ] Subgrid integration for aligned nested grid tracks across breakpoints

[ ] Range syntax for media queries vs legacy min-width / max-width

[ ] Intrinsic sizing keywords: min-content, max-content, and fit-content

[x] Responsive images using <picture>, srcset, and sizes

[x] Viewport meta configuration and scaling properties

Jarvis Interviews
Jarvis