Как работаете с адаптивной вёрсткой? Какие подходы используете?

Для адаптивной вёрстки обычно использую комбинацию следующих подходов:

• Медиа-запросы (CSS Media Queries): позволяют менять стили в зависимости от ширины экрана, ориентации устройства и других характеристик.
• Гибкие единицы измерения: такие как %, vw, vh, rem, которые позволяют элементам адаптироваться к размеру экрана.
• Flexbox и CSS Grid: для построения гибких и адаптивных макетов.
• Mobile-first подход: сначала пишу стили для мобильных устройств, затем расширяю для больших экранов.
• Использование готовых CSS-фреймворков: например, Bootstrap или Tailwind, которые имеют встроенную поддержку адаптивности.

Пример медиа-запроса:

.container {
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Такой подход позволяет подстраивать ширину контейнера под разные размеры экранов.