Skip to main content

Responsive Design

A quick reference for building beautiful, flexible, and robust responsive web interfaces.

1. Core Principles​

  • Fluid Layouts: Use relative units (%, em, rem, vw, vh) instead of fixed (px) for widths, margins, paddings, and fonts.
  • Flexible Images/Media: Use max-width: 100% on images, videos, and embeds to keep them within container bounds.
  • Media Queries: Adapt layouts for different screen sizes with CSS @media rules.
  • Mobile First: Start with styles for mobile (small screens), then layer on desktop/tablet enhancements.

2. Essential CSS Techniques​

Fluid Containers​

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

Responsive Images​

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

Viewport Meta Tag (HTML)​

<meta name="viewport" content="width=device-width, initial-scale=1" />

Media Queries​

/* Mobile first base styles */
body {
  font-size: 1rem;
}

/* Tablets */
@media (min-width: 600px) {
  body {
    font-size: 1.1rem;
  }
}

/* Desktops */
@media (min-width: 1024px) {
  body {
    font-size: 1.2rem;
  }
}

Responsive Typography​

html {
  font-size: 16px;
}

@media (min-width: 600px) {
  html {
    font-size: 18px;
  }
}

@media (min-width: 1200px) {
  html {
    font-size: 20px;
  }
}

CSS Clamp for Dynamic Sizing​

h1 {
  font-size: clamp(
    2rem,
    5vw,
    3rem
  ); /* Minimum 2rem, max 3rem, flexible in-between */
}

3. Layout Helpers​

Flexbox​

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flex-item {
  flex: 1 1 200px; /* Grow, shrink, basis */
}

CSS Grid​

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr 1fr;
  }
}

4. Navigation Patterns​

  • Hamburger Menus: Collapse navigation on small screens.
  • Off-canvas/Drawer Menus: Slide-in menus for mobile.
  • Sticky/Floating Nav: Use position: sticky for headers.

5. Touch & Click Targets​

  • Minimum target size: 48x48px
  • Adequate spacing between elements.

6. Testing Responsiveness​

  • Browser DevTools: Toggle device modes (Ctrl+Shift+M in Chrome/Firefox).
  • Resize Browser Window
  • Online Tools: Responsinator, Screenfly

7. Advanced Responsive Tips​

  • Use picture for responsive images:
<picture>
  <source srcset="img-large.jpg" media="(min-width: 800px)" />
  <img src="img-small.jpg" alt="Responsive image" />
</picture>
  • Hide/show elements:
.hide-mobile {
  display: none;
}
@media (min-width: 600px) {
  .hide-mobile {
    display: block;
  }
}
  • Container Queries (CSS):
    • Use with modern browsers for truly component-based responsiveness.
@container (min-width: 500px) {
  .card {
    font-size: 2rem;
  }
}

  • Prefer rem/em for scaling fonts and layout.

  • Avoid horizontal scroll: Use overflow-x: auto if needed.

8. Accessibility & Responsiveness​

  • Ensure readable font sizes on all devices.
  • Use sufficient color contrast.
  • Don't rely solely on color to convey meaning.
  • Ensure interactive elements are reachable by keyboard and screen reader.

9. Common Breakpoints (modify as needed)​

DeviceMin WidthExample Usage
Mobile0pxBase styles
Tablet600px2-column layouts
Desktop1024px3+ columns
Large Screen1200pxMax-width content

10. Quick Responsive Checklist​

  • Viewport meta tag set
  • Layout uses relative units
  • Images/media scale properly
  • Navigation adapts for mobile
  • Interactive elements are touch friendly
  • Content does not overflow horizontally
  • Tested across breakpoints and browsers

11. Useful Resources​

Pro Tip: Always start with a mobile-first approach and scale up. Use browser DevTools to emulate devices and test thoroughly. Responsive design isn’t just about screen size — consider touch, accessibility, and performance too!