57 lines
1.0 KiB
Markdown
57 lines
1.0 KiB
Markdown
---
|
|
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
|