foundation

Media queries

Используйте viewport, preference, input, color scheme, reduced motion и range queries как переключатели с учётом возможностей.

Media queries применяют стили по возможностям среды — не только по ширине viewport. Разделяйте layout, input и user preference.

					@media (min-width: 48rem) { .layout { grid-template-columns: 1fr 1fr; } }
@media (hover: hover) and (pointer: fine) {
  .menu-item:hover { background: var(--surface-hover); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}

Современный range syntax (`width >= 48rem`) читается яснее min/max пар. Различайте viewport media queries и container queries — они решают разные задачи переносимости.

На интервью: mobile-first, preference media features и когда hover-стили неуместны.

Компромисс: меньше breakpoints через fluid layout против явных скачков layout при реальном перестроении контента.

Типовые ошибки: breakpoints под конкретные устройства; игнор reduced motion и coarse pointer.

Чеклист:

Breakpoints по контенту и возможностям.
prefers-reduced-motion и color-scheme.
Range syntax для ясности.
Shell viewport отдельно от @container.