Адаптивная вёрстка используется в процессе создания сайтов для изменения дизайна определенной страницы в зависимости от поведенческих показателей (активности, типа устройства) пользователя. Методика позволяет модернизировать данные и формат показа информации за счёт анализа платформы, размеров экрана. Она относится к одним из вариантов веб-разработки и позволяет сэкономить временные издержки на выполнении отрисовки дизайна для каждого конкретного разрешения веб-страницы. Во время настройки разработчик меняет размеры и расположение отдельных блоков.
Методики адаптивной верстки веб-страниц
Изменение разрешения экрана: частичные решения
Повысить гибкость отдельных веб-страниц стоит для того, чтобы оперативно устранить целый перечень проблем с реализацией задач адаптивной верстки. Итаном Маркоттом (Ethan Marcotte) был создан простой шаблон, при помощи которого можно создавать адаптивные слои или полноценные картинки, которые позволят настроить различное отображение конкретных графических элементов на экране.
Важно понимать особенности верстки. Так, если просто уменьшить расширение логотипа целиком, то надписи перестанут читаться. Для сохранения основных функций изображение делится на две части - иллюстрацию (фон) и сам логотип. Для них размеры меняются пропорционально.
Элемент кода h1 содержит фоновое изображение, сама картинка выравнивается относительно фона контейнера (h1 заголовок).
Гибкая графика
При реализации опций адаптивной верстки важно правильно обработать и модернизировать изображения, иначе не удастся добиться эффективности от конкретной веб-страницы. Одним из доступных решений становится применение max-width в CSS. Устанавливается максимальная ширина изображения в пределах 100% от ширины экрана или стандартных размеров окна браузера. Данный способ не поддерживается в IE, для этого приложения разумно применение width: 100%.
Метод позволяет оперативно создавать адаптивную графику за счёт изменения только одного размера картинки, однако вес изображения останется прежним, что скажется на времени загрузки данных через мобильные гаджеты.
Метод «отзывчивых» изображений
Для обеспечения «чувствительности» изображения к изменениям текущего размера экрана стоит применить расширение Picturefill. Для этого разработчик осуществляет загрузку файла picturefill.js, а затем прописывает стандартный код внутри самого тега head:
<script src="picturefill.js"></script>
Настройка структуры макета страниц
При возникновении потребности в значительном изменении размеров веб-страницы необходимо изменить особенности расположения всех элементов целиком. Для реализации задачивадно точно определить расположение каждого блока. Сделать это возможно, создав отдельный файл с адаптивной вёрсткой в формате CSS или CSS-медиазапрос. Большинство стилей не будут подвержены изменениям, только некоторые из них, которые влияют на показатель доступности данных при открытии страницы через определённое устройство/браузер.
Медиазапросы CSS3 в адаптивной верстке
Стандартные CSS3-медиазапросы помогут при разработке свежего и полностью адаптированного дизайна. Так, запрос min-width позволяет задать определённую (минимальную) ширину окна для отображения страницы на экране или в браузере, а max-width - максимальный параметр. Оба кода работают сразу с двумя основными разрешениями. При работе только с шириной устройства используются команды: min-device-width и max-device-width.
Для адаптации к версии страниц для iPad можно использовать свойство orientation. Оно может быть или горизонтальным (landscape), либо вертикальным (portrait).
Опциональное отображение графического контента
Для размещения больного количества полезных объектов на страницах в браузерах с небольшим разрешением не всегда разумны опции сжатия или замены месторасположения. При запуске с мобильных гаджетов лучше использовать весь перечень инструментов: простая навигация, сфокусированный контент, списки вместо колонок и прочее.
Подобные задачи оперативно решаются через CSS3. Запрос «display: none» применим для отдельных объектов, которые необходимо спрятать. При изменении размера экрана (уменьшении) можно применить скрипт или альтернативный вариант со стилями.
При наличии возможности для демонстрации и скрытия элементов, изменения размеров графики и иных параметров, возможно реализовать уникальные задачи при помощи современной адаптивной верстки. Она создаётся под разные гаджеты и экраны, повышает мобильность веб-ресурсов.
