Мастер отзывчивого дизайна за 5 минут 4 секретные техники

Современный веб-сайт должен хорошо выглядеть в любых условиях. Разбираемся в основах отзывчивого дизайна и учим страницу подстраиваться.

Мастер отзывчивого дизайна за 5 минут: 4 секретные техники

Что такое отзывчивый дизайн?

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

Зачем нужен отзывчивый дизайн?

Чтобы пользователи могли с одинаковым удобством работать с вашим сайтом и со смартфона, и с огромного монитора, и с наполовину свернутой вкладки.

Откройте мне секретные техники отзывчивого дизайна

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

Отзывчивость в вебе стоит на четырех CSS-китах:

  • Относительные единицы измерения подстраивают различные метрики элементов под размеры вьюпорта или родительского контейнера. Самые полезные единицы, которые вы обязательно должны знать: % (проценты), em / rem , vw / vh .
  • Медиа-запросы отслеживают изменение вьюпорта и применяют нужный блок стилей в зависимости от ситуации.
  • Flexbox-система создает гибкие макеты.
  • Отзывчивая типографика обеспечивает комфортные для чтения размеры шрифтов.

Благодаря использованию этих техник элементы органично вписываются в текущую обстановку сайта, а не живут собственной жизнью, нарушая ожидания пользователя.

Как стать мастером отзывчивого дизайна за 5 минут?

Конечно, прочитав эту статью, профессионалом вы не станете – тут нужна практика, практика и еще раз практика. Однако познакомитесь с базовыми концепциями и техниками, без которых качественного сайта не создать.

Всего за 5 минут мы постараемся на живом примере разобраться с четырьмя китами отзывчивости – это неплохое вложение вашего времени, согласитесь.

Представьте себе очень простой веб-сайт вроде этого:

Мастер отзывчивого дизайна за 5 минут

Его HTML-код выглядит вот так:

У этого сайта фиксированная ширина. Это значит, что при изменении размеров окна браузера он остается неизменным:

Эта страница полностью игнорирует окружающую обстановку и даже не пытается соответствовать вашим ожиданиям. Надо это поправить.

Проценты для резинового изображения

Для начала добавим капельку отзывчивости с помощью процентов:

Теперь ширина изображения всегда будет равна 70% от ширины его родителя. В данном случае родителем выступает тег body , который растянут на весь экран. Стало быть ширина картинки – 70% от ширины окна браузера.

Вот что у нас получилось:

Это простейший способ создания отзывчивых изображений.

Медиа-запросы для маленьких экранов

Есть небольшая проблема с нашим свежесозданным адаптивным сайтом. На очень маленьких экранах он выглядит… не очень. 70% от ширины экрана на мобильном – это слишком мало, а по бокам остается слишком много свободного пространства.

Мастер отзывчивого дизайна за 5 минут: 4 секретные техники

Чтобы исправить ситуацию, прибегнем к помощи медиа-запросов. Они позволяют использовать для элементов разные CSS-стили в зависимости от размеров окна. Например, мы можем растянуть картинку на 100% в том случае, если ширина браузера не превышает 768 пикселей. Медиа-запрос для этого будет выглядеть вот так:

Если ширина тега body станет меньше 768 пикселей, картинка растянется на 100%, иначе – на 70%.

На гифке хорошо видно, что в точке перехода (брейкпоинт) изображение резко изменяет свой размер.

Flexbox для навигационного меню

Давным-давно в смутные времена float-элементов создание отзывчивого дизайна было непростой задачей (впрочем, изобретательные верстальщики и тогда отлично справлялись). Но сейчас у нас есть flexbox, который позволяет легко и непринужденно управлять положением элементов.

Чтобы увидеть всю его чудесную силу, добавим на нашу простенькую страничку навигационное меню:

По умолчанию оно выглядит довольно скучно:

Мастер отзывчивого дизайна за 5 минут: 4 секретные техники

Все пункты сгрудились в левой части страницы, но мы хотим разместить их равномерно по всей ширине.

Чтобы сделать это, просто превратим контейнер меню во флекс-элемент и добавим ему волшебное свойство justify-content .

Теперь пространство между пунктами распределяется равномерно – и это распределение будет сохранено на любом размере вьюпорта.

Посмотрите также наши статьи:

Отзывчивая типографика: rem

Осталось добавить отзывчивости типографике. Сделаем так, чтобы навигационное меню и заголовок немного уменьшались, если ширина вьюпорта станет меньше 768 пикселей.

Мы уже использовали этот брейкпоинт, когда растягивали изображение – помните? В этот же медиа-запрос можно добавить и изменение размера шрифтов:

Это рабочий пример, но совсем неидеальный. Представьте, что у нас не один, а несколько брейкпоинтов и с десяток элементов, которым нужно менять размер шрифта (заголовки разного порядка, абзацы, цитаты и пр.). Уследить за всем этим хозяйством непросто, в вашем CSS образуется форменный беспорядок!

Впрочем, если мы немного подумаем, то, скорее всего, найдем некоторые закономерности. Заголовок первого уровня ( h1 ), например, всегда больше по размеру, чем абзац ( p ). Было бы очень удобно настроить всего лишь один базовый размер, а остальные масштабировать относительно него – и CSS предоставляет нам такую возможность!

Значение 1rem всегда равно размеру шрифта у элемента html , значит, его можно взять за основу. Если вы установите для корневого элемента свойство font-size , равное 14 пикселей, 1rem будет равен 14px .

Вы можете использовать это значение для любого другого элемента:

Теперь в медиа-запросе достаточно внести всего лишь одно изменение и все ваши стили изменятся каскадом:

Посмотрите также наши статьи:

Мастер отзывчивого дизайна

Смотрите, прошло всего 5 минут, а вы уже разбираетесь в основах адаптивного дизайна сайтов. Ваши изображения, меню и шрифты реагируют на изменение ширины вьюпорта и подстраиваются под него.