Некоторые виды вёрстки и случаи их использования:
- Табличная вёрстка. 14 В качестве основы структуры расположения элементов используют тег
. 1 Применяется, когда нужно выровнять нижнюю часть страницы относительно нижнего края окна браузера или установить одинаковую высоту для колонок, независимо от объёма их содержимого. 1 Также табличная вёрстка может использоваться для структурирования табличных данных и расположения блоков изображений CSS. 4
- Фиксированная вёрстка. 28 Предполагает одинаковую ширину страницы, независимо от размера экрана устройства. 2 Если элемент не помещается на экране, появляется полоса прокрутки. 2 Такой подход был популярен на ранних этапах развития веб-дизайна, когда большинство пользователей использовали экраны с одинаковым разрешением. 8 Сейчас фиксированная вёрстка встречается очень редко, обычно в случае, если ресурс не обновлялся более 20 лет. 8
- Резиновая (гибкая) вёрстка. 28 Элементы на странице остаются на своих местах, но при этом растягиваются или сжимаются в зависимости от ширины экрана. 2 Это достигается за счёт использования относительных размеров вместо фиксированных. 2 Например, если в фиксированной вёрстке у кнопки ширина 200 пикселей, то она всегда будет 200 пикселей, независимо от размера экрана. 2 В резиновой вёрстке кнопка может занимать 20% ширины экрана, и её размер изменится в зависимости от ширины устройства. 2
- Адаптивная вёрстка. 28 Позволяет подстраивать структуру и стиль страницы в зависимости от размера экрана устройства. 2 Можно создать отдельные макеты для разных разрешений и поддерживать оптимальную функциональность сайта на мобильных телефонах, планшетах и десктопах. 2 Для реализации адаптивной вёрстки используются медиазапросы — специальные CSS-правила, позволяющие применять различные стили в зависимости от ширины экрана или его ориентации. 2
- Респонсивная вёрстка. 2 Использует медиазапросы и задаёт размеры элементов в относительных единицах, что позволяет им плавно изменять размер и расположение в зависимости от ширины экрана. 2
