---
name: system/responsive-patterns
title: Responsive Design Patterns
description: Breakpoints, mobile-first, container queries.
tags: [system, responsive, mobile, container-queries]
source: stripe.com, linear.app, brad.co, css-tricks.com
---

# Responsive Patterns

## Breakpoints

```css
:root {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}
```

## Container Queries

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

## Anti-patterns

| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| 1000px breakpoint | 768px / 1024px |
| Fixed width | `max-width: 1200px` |