---
title: Responsive Design Patterns
description: Mobile-first responsive design for premium websites.
tags: [responsive, mobile, breakpoints, grid, layout]
---

# Responsive Design Patterns

## Breakpoint Scale

```
xs: 0px    — Mobile (default)
sm: 640px  — Large mobile
md: 768px  — Tablet
lg: 1024px — Laptop
xl: 1280px — Desktop
2xl: 1536px — Large desktop
3xl: 1920px — Widescreen
```

## Grid System

### Mobile (< 768px)
- 1 column layout
- Full-bleed sections
- Stacked cards
- Hamburger menu

### Tablet (768px - 1024px)
- 2 column grid
- Side-by-side cards
- Sticky navigation

### Desktop (> 1024px)
- 12-column grid
- Bento grid layouts
- Parallax effects
- Hover interactions

## Fluid Typography

```css
font-size: clamp(1rem, 2vw + 0.5rem, 2.5rem);
```

## Fluid Spacing

```css
padding: clamp(1rem, 5vw, 4rem);
```

## Anti-Patterns
- Never use fixed pixel widths for containers
- Never hide content on mobile — restructure instead
- Never ignore touch targets (min 48x48px)
- Never disable scroll animations on mobile