wow-design-wiki/system/responsive-patterns.md

name, title, description, tags, source

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

Responsive Patterns

Breakpoints

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

Container Queries

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

Anti-patterns

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