Чем отличаются фиксированная, резиновая, адаптивная и отзывчивая вёрстка?

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

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