ypx fbpx
Адаптивная вёрстка
С появлением огромного количества гаджетов для верстальщиков возникла новая задача – сделать так, чтобы веб-сайт корректно отображался на различных устройствах. В статье мы расскажем, что такое адаптивная вёрстка и рассмотрим несколько полезных техник.
Веб-разработка
2296

Что такое адаптивная вёрстка?


Адаптивная вёрстка – это такой вид вёрстки, при котором готовый веб-сайт способен подстраиваться под размер и ориентацию любого девайса, а также менять дизайн страницы в зависимости от действий пользователя. Для каждого отдельного разрешения девайса будет изменяться расположение элементов сайта без необходимости отрисовывать новый дизайн-макет под каждое расширение.




Какие существуют техники для адаптации основных элементов веб-страниц?


1.Гибкий макет (Flexible layout)


Все фиксированные единицы длины превращаются в относительные с помощью формулы для вычисления пропорций в процентах «target ÷ context = result», или ширину элемента делим на ширину экрана и получаем ширину элемента в процентах, что позволяет ему подстраиваться под размер устройства. Например, макет шириной 1000px имеет два блока: слева шириной 250px и справа шириной 530px. Применим формулу пропорций:


Формула гибкого макета позволяет создать полностью динамичный веб-сайт, масштабируемый до любого размера области просмотра.

2.Гибкие изображения (Flexible media)


Делаем изображения, видео и другие типы медиа полностью масштабируемыми с помощью свойства {max-width: 100%}. Оно гарантирует, что при уменьшении области просмотра любые мультимедиа будут уменьшаться в соответствии с шириной своего контейнера.



3.Гибкие встроенные медиа (Flexible Embedded Media)


Свойство max-width, к сожалению, не будет работать, если на веб-странице используются медиа сторонних веб-сайтов, например, видеоролики YouTube. Чтобы встроенные мультимедиа были полностью адаптивными, встраиваемый элемент необходимо чётко расположить внутри родительского. Родительский элемент должен иметь 100% ширину и высоту, равную 0, чтобы он мог масштабироваться в зависимости от ширины области просмотра.

Задаём отступ в нижней части родительского элемента, значение которого устанавливается в том же соотношении сторон видео. Это позволит высоте родительского элемента быть пропорциональной его ширине.

Дано видео с соотношением сторон 16:9. Применим формулу
гибкого макета, разделив 9 на 15. Получаем 0.5625 или 56,25%.




4.Медиа-запросы (Media queries)


Media queries – это техника адаптации веб-сайтов для расширенного списка устройств с помощью CSS модуля. Стандарт CSS позволяет применять стили, опираясь на информацию о разрешении устройства. Медиа-запросы используют в телевидении, мобильной разработке, печати и даже в новых типах медиа, например, 3D-очках.

Использовать медиа-запросы можно несколькими способами: с помощью правила @media внутри существующей таблицы стилей, импорта новой таблицы стилей с использованием правила @import или путём ссылки на отдельную таблицу стилей из документа HTML.




Рекомендуется использовать правило @media внутри существующей таблицы стилей. Такой подход поможет избежать дополнительных HTTP-запросов.

5.Mobile first


Техника Mobile First – это стратегия, при которой сайт верстается в первую очередь для мобильных устройств. Затем применяется техника Media queries, которая добавляет стили по мере роста области просмотра.

Адаптивная вёрстка является неотъемлемой частью современной веб-разработки. В этой статье мы рассмотрели 5 основных техник адаптивной вёрстки, которые помогут создать гибкий веб-сайт для абсолютно каждого устройства.

Понравилась статья? Сохраните её в своих соц. сетях!
обучайся с нами профессии
Веб-разработчик
Подробнее о курсе
Читайте другие статьи
Рефакторинг кода
О процессе, позволяющем сделать код более эффективным и удобным в обслуживании, улучшить его читаемость, значительно упростить контроль качества и отладки, а также предотвратить появление ошибок в будущем.
Веб-разработка
879
Увлекательные игры для обучения верстке
Браузерные игры для развития навыков верстки – 8 чудо света. Благодаря им стало возможно в онлайн-режиме решать логические задачи, проходить аркады в красочных мирах и одновременно обучаться навыкам веб-программирования.
Веб-разработка
1859
Полезные расширения Google для веб-разработчиков
Вспомогательные инструменты, улучшающие процесс работы, как вторая пара рук для веб-разработчика.
Веб-разработка
1162
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Введите корректный e-mail
Никакого спама. Только ценные и полезные статьи для вас!