Урок посвящен созданию адаптивного сайта с использованием HTML и CSS. JavaScript в этом уроке не используется, но рассматривается важный мета-тег, упрощающий адаптацию. Весь код доступен по ссылке (ссылка опущена).
Мета-тег viewport
Ключевым элементом адаптивного дизайна является мета-тег <meta name=»viewport»>. Без него, страница на мобильных устройствах отображается в первоначальном размере, предназначенном для больших экранов, что неудобно.
Пример: без тега viewport текст «Hello World» на экране iPhone будет очень маленьким и нечитаемым.
Тег viewport решает эту проблему. Атрибут content="width=device-width" настраивает ширину страницы под ширину устройства. Дополнительные атрибуты, такие как initial-scale и maximum-scale, задают начальный и максимальный масштаб страницы. Благодаря viewport, текст «Hello World» корректно отображается на мобильном устройстве.
viewport также позволяет пользователю прокручивать страницу (атрибут user-scalable).
Структура сайта и особенности верстки
Сайт имеет стандартную структуру: мета-теги, HTML-теги, меню, основная часть, боковая панель и футер. Особое внимание заслуживает меню.
Меню прикрепляется к верхней части страницы после прокрутки, когда шапка скрывается. Эта функциональность реализована с помощью JavaScript (код не рассматривается в этом уроке). Функция срабатывает при достижении определенной точки прокрутки, определяемой с помощью offsetTop. На мобильных устройствах (при ширине экрана меньше 800 пикселей) эта функция отключена, чтобы избежать неудобств, связанных с занимаемым местом. Это элемент адаптивности.
Рассмотрены основные аспекты верстки адаптивного сайта, с фокусом на мета-теге viewport. В последующих уроках подробнее разберем адаптивную верстку. Предоставленный код обеспечивает базовую адаптацию, но в следующих уроках добавим больше функциональности.