Основные типы верстки интерфейсов и их особенности

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

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

Верстка бывает статической, резиновой, адаптивной и отзывчивой. Статическая фиксирует размеры элементов, резиновая растягивается вместе с окном браузера, адаптивная меняется по заранее заданным точкам перелома, а отзывчивая динамически подстраивается под любые размеры экрана.

---

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

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

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

Адаптивная верстка базируется на использовании заранее определенных точек перелома (breakpoints), при достижении которых изменяется структура и стили интерфейса для оптимального отображения на конкретных устройствах.

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

Тип верстки	Характеристика	Пример использования
Статическая	Фиксированные размеры	Простые десктопные сайты
Резиновая	Процентные размеры, растягивается	Широкоформатные интерфейсы
Адаптивная	Точки перелома, смена стилей	Мобильные сайты с набором шаблонов
Отзывчивая	Гибкая подстройка под любые экраны	Современные веб-приложения

Пример

/* Статическая */
div {
  width: 800px;
}

/* Резиновая */
div {
  width: 80%;
}

/* Адаптивная */
@media (max-width: 768px) {
  div {
    width: 100%;
  }
}

/* Отзывчивая */
div {
  width: calc(100% - 40px);
}

В этом примере показано, как разные типы верстки задают ширину блока: от фиксированной до динамической подстройки.

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

• Понимать, что адаптивная и отзывчивая верстка — не одно и то же, хотя часто используются вместе.
• Знать, как влияют точки перелома на изменения интерфейса.
• Уметь объяснить, почему резиновая верстка может привести к проблемам с читаемостью.
• Быть готовым рассмотреть конкретные сценарии, где предпочтительнее использовать тот или иной тип верстки.
• Осознавать влияние выбранного типа верстки на UX и тестирование интерфейса.

---

Тема: UI/UX тестирование | Уровень: middle