36 lines
682 B
Markdown
36 lines
682 B
Markdown
---
|
|
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` |
|