Современный веб-сайт должен хорошо выглядеть в любых условиях. Разбираемся в основах отзывчивого дизайна и учим страницу подстраиваться.
Что такое отзывчивый дизайн?
Это способность вашего сайта подстраиваться под изменение внешних условий, например, ширины браузера, без потери визуальной привлекательности.
Смотрите небольшой ликбез по отзывчивости и адаптивности в вебе.
Зачем нужен отзывчивый дизайн?
Чтобы пользователи могли с одинаковым удобством работать с вашим сайтом и со смартфона, и с огромного монитора, и с наполовину свернутой вкладки.
Откройте мне секретные техники отзывчивого дизайна
Основная идея заключается в том, что нужно избегать жестко заданных значений и ориентироваться прежде всего на условия, в которых работает сайт.
Отзывчивость в вебе стоит на четырех CSS-китах:
- Относительные единицы измерения подстраивают различные метрики элементов под размеры вьюпорта или родительского контейнера. Самые полезные единицы, которые вы обязательно должны знать:
%(проценты),em/rem,vw/vh. - Медиа-запросы отслеживают изменение вьюпорта и применяют нужный блок стилей в зависимости от ситуации.
- Flexbox-система создает гибкие макеты.
- Отзывчивая типографика обеспечивает комфортные для чтения размеры шрифтов.
Благодаря использованию этих техник элементы органично вписываются в текущую обстановку сайта, а не живут собственной жизнью, нарушая ожидания пользователя.
Как стать мастером отзывчивого дизайна за 5 минут?
Конечно, прочитав эту статью, профессионалом вы не станете – тут нужна практика, практика и еще раз практика. Однако познакомитесь с базовыми концепциями и техниками, без которых качественного сайта не создать.
Всего за 5 минут мы постараемся на живом примере разобраться с четырьмя китами отзывчивости – это неплохое вложение вашего времени, согласитесь.
Представьте себе очень простой веб-сайт вроде этого:
Его HTML-код выглядит вот так:
<body> <h1>Welcome to my website</h1> <image src=”path/to/img.png” class=”myImg”> </body>
У этого сайта фиксированная ширина. Это значит, что при изменении размеров окна браузера он остается неизменным:
Эта страница полностью игнорирует окружающую обстановку и даже не пытается соответствовать вашим ожиданиям. Надо это поправить.
Проценты для резинового изображения
Для начала добавим капельку отзывчивости с помощью процентов:
.myImg {
width: 70%;
}
Теперь ширина изображения всегда будет равна 70% от ширины его родителя. В данном случае родителем выступает тег body, который растянут на весь экран. Стало быть ширина картинки – 70% от ширины окна браузера.
Вот что у нас получилось:
Это простейший способ создания отзывчивых изображений.
Посмотрите также нашу статью Адаптивные изображения: 5 трюков CSS для экономии времени.
Медиа-запросы для маленьких экранов
Есть небольшая проблема с нашим свежесозданным адаптивным сайтом. На очень маленьких экранах он выглядит… не очень. 70% от ширины экрана на мобильном – это слишком мало, а по бокам остается слишком много свободного пространства.
Чтобы исправить ситуацию, прибегнем к помощи медиа-запросов. Они позволяют использовать для элементов разные CSS-стили в зависимости от размеров окна. Например, мы можем растянуть картинку на 100% в том случае, если ширина браузера не превышает 768 пикселей. Медиа-запрос для этого будет выглядеть вот так:
@media (max-width: 768px) {
.myImage {
width: 100%
}
}
Если ширина тега body станет меньше 768 пикселей, картинка растянется на 100%, иначе – на 70%.
На гифке хорошо видно, что в точке перехода (брейкпоинт) изображение резко изменяет свой размер.
Flexbox для навигационного меню
Давным-давно в смутные времена float-элементов создание отзывчивого дизайна было непростой задачей (впрочем, изобретательные верстальщики и тогда отлично справлялись). Но сейчас у нас есть flexbox, который позволяет легко и непринужденно управлять положением элементов.
Чтобы увидеть всю его чудесную силу, добавим на нашу простенькую страничку навигационное меню:
<nav> <a href="#">Home</a> <a href="#">About me</a> <a href="#">Contact</a> </nav>
По умолчанию оно выглядит довольно скучно:
Все пункты сгрудились в левой части страницы, но мы хотим разместить их равномерно по всей ширине.
Чтобы сделать это, просто превратим контейнер меню во флекс-элемент и добавим ему волшебное свойство justify-content.
nav {
display: flex;
justify-content: space-around;
}
Теперь пространство между пунктами распределяется равномерно – и это распределение будет сохранено на любом размере вьюпорта.
Посмотрите также наши статьи:
- 5 техник работы с flexbox, о которых стоит знать веб-разработчику
- Объясняем работу Flexbox-лейаутов с помощью больших разноцветных гифок
Отзывчивая типографика: rem
Осталось добавить отзывчивости типографике. Сделаем так, чтобы навигационное меню и заголовок немного уменьшались, если ширина вьюпорта станет меньше 768 пикселей.
Мы уже использовали этот брейкпоинт, когда растягивали изображение – помните? В этот же медиа-запрос можно добавить и изменение размера шрифтов:
@media screen and (max-width: 768px) {
nav {
font-size: 14px;
}
h1 {
font-size: 28px;
}
}
Это рабочий пример, но совсем неидеальный. Представьте, что у нас не один, а несколько брейкпоинтов и с десяток элементов, которым нужно менять размер шрифта (заголовки разного порядка, абзацы, цитаты и пр.). Уследить за всем этим хозяйством непросто, в вашем CSS образуется форменный беспорядок!
Впрочем, если мы немного подумаем, то, скорее всего, найдем некоторые закономерности. Заголовок первого уровня (h1), например, всегда больше по размеру, чем абзац (p). Было бы очень удобно настроить всего лишь один базовый размер, а остальные масштабировать относительно него – и CSS предоставляет нам такую возможность!
Значение 1rem всегда равно размеру шрифта у элемента html, значит, его можно взять за основу. Если вы установите для корневого элемента свойство font-size, равное 14 пикселей, 1rem будет равен 14px.
html {
font-size: 14px;
}
Вы можете использовать это значение для любого другого элемента:
h1 {
font-size: 2rem;
}
nav {
font-size: 1rem;
}
Теперь в медиа-запросе достаточно внести всего лишь одно изменение и все ваши стили изменятся каскадом:
@media (max-width: 768px) {
html {
font-size: 14px
}
}
Посмотрите также наши статьи:
- Большая подборка лучших ресурсов для изучения CSS
- Frontend-спринт: 100 быстрых советов по HTML, CSS и JavaScript
Мастер отзывчивого дизайна
Смотрите, прошло всего 5 минут, а вы уже разбираетесь в основах адаптивного дизайна сайтов. Ваши изображения, меню и шрифты реагируют на изменение ширины вьюпорта и подстраиваются под него.
Продолжайте экспериментировать – и создавайте адаптивные шедевры.
Комментарии