Основные виды верстки и их особенности в веб-разработке

Существует несколько ключевых подходов к верстке: блочная, табличная, адаптивная и резиновая. Каждый из них применяется в зависимости от требований к дизайну и устройствам пользователей.

Краткий ответ

Верстка бывает блочной, табличной, адаптивной и резиновой. Блочная верстка строится на CSS-блоках, табличная — на HTML-таблицах, адаптивная подстраивается под устройства через медиа-запросы, а резиновая изменяет размеры элементов в зависимости от окна браузера.

---

Как это работает

Блочная верстка использует контейнеры и блоки, управляемые с помощью CSS (display, position, flex, grid), что обеспечивает гибкость и удобство адаптации дизайна.

Табличная верстка базируется на использовании HTML-таблиц (<table>, <tr>, <td>) для размещения элементов, что раньше было стандартом, но сегодня считается устаревшим из-за слабой адаптивности.

Адаптивная верстка применяет CSS-медиа-запросы (@media) для изменения стилей в зависимости от размера экрана или устройства, обеспечивая оптимальный пользовательский опыт на разных устройствах.

Резиновая верстка (fluid layout) использует процентные ширины и гибкие размеры для элементов, позволяя им растягиваться или сжиматься вместе с изменением окна браузера.

Вид верстки	Основной принцип	Плюсы	Минусы
Блочная	Использование CSS-блоков	Гибкость, современный подход	Требует навыков CSS
Табличная	Верстка через HTML-таблицы	Простота для табличных данных	Плохая адаптивность
Адаптивная	Медиа-запросы для разных экранов	Отличная подстройка под устройства	Сложнее в реализации
Резиновая	Процентные размеры элементов	Плавное изменение размеров	Может ломать дизайн при экстремальных размерах

Пример

/* Пример адаптивной верстки с медиа-запросом */
.container {
  width: 80%;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .container {
    width: 100%;
  }
}

Этот код задает контейнер с шириной 80% экрана и изменяет ее на 100% для экранов меньше 600px, обеспечивая адаптивность.

Что важно знать на собеседовании

• Отличия между блочной и табличной версткой и почему табличная устарела.
• Как работают медиа-запросы и зачем нужна адаптивная верстка.
• Принцип резиновой верстки и когда она применяется.
• Влияние выбора вида верстки на тестирование UI и адаптивности.
• Значение CSS Flexbox и Grid в современной блочной верстке.

---

Тема: Web-тестирование и DevTools | Уровень: middle