Фиксированная, резиновая, адаптивная и отзывчивая вёрстка отличаются подходом к адаптации контента под разные размеры экранов: 13

1. Фиксированная вёрстка предполагает одинаковую ширину страницы, независимо от размера экрана устройства. 3 Вся ширина блоков жёстко задана в пикселях. 1 Если элемент не помещается на экране, появляется полоса прокрутки. 3 Такой формат встречается редко, так как размеры экранов достаточно вариативны. 1
2. Резиновая вёрстка оставляет элементы на странице на своих местах, но при этом растягивает или сжимает их в зависимости от ширины экрана. 3 Это достигается за счёт использования относительных размеров вместо фиксированных. 3 Часто такая вёрстка учитывает только один тип устройств. 1
3. Адаптивная вёрстка позволяет подстраивать структуру и стиль страницы в зависимости от размера экрана устройства. 3 Можно создать отдельные макеты для разных разрешений и поддерживать оптимальную функциональность сайта на мобильных телефонах, планшетах и десктопах. 3 Для реализации адаптивной вёрстки используются медиазапросы — специальные CSS-правила, позволяющие применять различные стили в зависимости от ширины экрана или его ориентации. 3
4. Отзывчивая (респонсивная) вёрстка использует медиазапросы и задаёт размеры элементов в относительных единицах, что позволяет им плавно изменять размер и расположение в зависимости от ширины экрана. 3 Например, при уменьшении ширины экрана текст в колонках может автоматически переноситься на следующую строку, тогда как в адаптивной вёрстке текст может просто уменьшаться или обрезаться. 3 Такой подход обеспечивает более гибкое и удобное отображение контента на различных устройствах. 3