Responsive design

Responsive design сочетает fluid-примитивы с точечными breakpoints. Mobile-first: базовые стили для узкого viewport, затем min-width, когда контенту реально нужно больше места.

					.hero-title {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);
}
.layout {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .layout { grid-template-columns: 16rem 1fr; }
}
				

Fluid-изображения (`max-width: 100%`, `srcset`), гибкая типографика и preference queries (hover, pointer, reduced motion). Breakpoints — по точкам напряжения контента, не по списку моделей устройств.

На интервью: mobile-first, breakpoints по контенту, touch vs hover и длинные переводы.

Типовые ошибки: breakpoints только по viewport в переиспользуемых компонентах; фиксированная высота и vw-типографика дают overflow.

Компромисс: меньше breakpoints (сначала fluid) против явных скачков layout, когда контент действительно перестраивается.

Чеклист:

• Начинайте fluid: minmax и clamp.
• Breakpoints, когда ломается контент, не «под iPhone».
• Учитывайте input и motion preferences.
• Тестируйте zoom и локализацию.