Какие основные подходы (виды) к верстке веб-страниц существуют?

Подходы к верстке определяют, как макет адаптируется к различным устройствам и размерам экрана.

1. По типу макета

• Фиксированная (Fixed Layout) Ширина контейнера задается в пикселях (px) и не меняется. Не адаптируется под размер экрана.

  .container { width: 960px; margin: 0 auto; }

• Резиновая (Fluid Layout) Размеры задаются в процентах (%) или относительных единицах (em, rem). Макет растягивается/сжимается, но без резких изменений структуры.

  .container { width: 90%; max-width: 1200px; }
  .sidebar { width: 25%; }

• Адаптивная (Adaptive Layout) Использует фиксированные контрольные точки (breakpoints) через медиазапросы (@media). На каждом брейкпоинте макет резко меняется.

  /* Мобильные */
  .card { width: 100%; }
  @media (min-width: 768px) {
    /* Планшеты */
    .card { width: 50%; }
  }
  @media (min-width: 1024px) {
    /* Десктопы */
    .card { width: 25%; }
  }

• Отзывчивая (Responsive Layout) Комбинация резиновой сетки и адаптивных медиазапросов. Макет плавно изменяется и имеет резкие переломы в ключевых точках. Современный стандарт.

2. По методологии

• Mobile First Стили пишутся сначала для мобильных устройств, а затем с помощью min-width добавляются улучшения для более широких экранов.
• Desktop First Обратный подход: начальные стили для десктопа, а затем с помощью max-width добавляются корректировки для мобильных.

Современный инструмент: CSS Grid и Flexbox являются основой для создания гибких и отзывчивых макетов любого типа.