Какие знаешь типы верстки под разные экраны?

Типы верстки для разных экранов

В современной веб-разработке существует несколько основных подходов к верстке, которые обеспечивают корректное отображение интерфейсов на устройствах с различными размерами экранов. Выбор подхода зависит от требований проекта, целевой аудитории и сложности интерфейса.

1. Адаптивная верстка (Responsive Web Design)

Адаптивная верстка — самый распространенный и современный подход, при котором макет динамически подстраивается под размеры viewport'а с использованием CSS медиазапросов (media queries), гибких сеток и относительных единиц измерения.

/* Базовые стили для мобильных устройств */
.container {
  width: 100%;
  padding:, 10px;
}

/* Медиазапрос для планшетов */
@media (min-width: 768px) {
  .container {
    width: 750px;
    padding: 20px;
  }
}

/* Медиазапрос для десктопов */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Ключевые особенности:

• Единый код HTML/CSS для всех устройств
• Плавное изменение макета без резких скачков
• Использование относительных единиц (%, rem, em, vw/vh) вместо фиксированных пикселей
• Mobile-first подход — разработка начинается с мобильной версии
• Гибкие изображения через max-width: 100%

2. Отзывчивая верстка (Fluid Layout)

Отзывчивая верстка — предшественник адаптивной, где элементы масштабируются пропорционально, но без контрольных точек (breakpoints). Весь интерфейс "растягивается" или "сжимается" как единое целое.

.container {
  width: 90%; /* вместо фиксированного width: 1200px */
  margin: 0 auto;
}

.column {
  width: 30%; /* всегда занимает 30% ширины контейнера */
  float: left;
}

Отличие от адаптивной: нет переломных точек, интерфейс может выглядеть неоптимально на экстремальных размерах экрана.

3. Резиновая верстка (Elastic Layout)

Резиновая верстка основана на относительных единицах em, которые привязываются к размеру шрифта. При увеличении/уменьшении шрифта в браузере весь макет пропорционально масштабируется.

.container {
  width: 60em; /* зависит от font-size */
  font-size: 16px;
}

@media (max-width: 768px) {
  .container {
    font-size: 14px; /* изменится весь макет */
  }
}

Применение: удобно для сайтов, где доступность и масштабирование текста имеют приоритет.

4. Фиксированная верстка (Fixed Layout)

Фиксированная верстка использует абсолютные единицы (пиксели) и предназначена для конкретного размера экрана. Исторически использовалась для десктопных мониторов с разрешением ~1024px.

.container {
  width: 960px; /* Фиксированная ширина */
  margin: 0 auto;
}

Недостатки: не работает на мобильных устройствах, требует горизонтального скролла на маленьких экранах. Сегодня практически не применяется в чистом виде.

5. Отдельные мобильные версии (Separate Mobile Site)

Технически не тип верстки, но подход к решению проблемы:

• m.example.com — отдельный субдомен для мобильных устройств
• Разные HTML/CSS кодбазы
• Определение устройства на сервере или через JavaScript

// Пример редиректа на мобильную версию
if (/Mobile|Android|iPhone/i.test(navigator.userAgent)) {
  window.location = "https://m.example.com";
}

Проблемы: дублирование контента, сложность поддержки, плохой SEO.

6. Адаптивная верстка с контрольными точками (Breakpoint-based)

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

/* Контрольные точки по контенту */
@media (min-width: 600px) {
  /* Когда элементы начинают перекрываться */
}

@media (min-width: 900px) {
  /* Когда боковая панель может занять отдельную колонку */
}

Сравнительная таблица подходов

Современные тренды и инструменты

1. CSS Grid + Flexbox — современные стандарты для создания сложных адаптивных макетов
2. Container Queries — новая спецификация CSS, позволяющая элементам адаптироваться к размеру контейнера, а не всего экрана
3. Клиентские подсказки (Client Hints) — HTTP-заголовки для оптимизации загрузки ресурсов
4. Адаптивные изображения с использованием srcset, sizes и picture

<!-- Адаптивные изображения -->
<img src="small.jpg"
     srcset="medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 768px) 100vw, 50vw"
     alt="Пример">

Рекомендация для 2024 года: Используйте адаптивную верстку с mobile-first подходом, сочетая CSS Grid для макета и Flexbox для компонентов, добавляя контейнерные запросы для изолированных компонентов. Всегда тестируйте на реальных устройствах, а не только в инструментах разработчика.