Адаптивный дизайн: практика

Основы фронтенд разработки

Назад57 / 108Вперёд

Адаптивный дизайн: практика

Продолжительность: 30 мин

Пришло время применить медиазапросы на практике. В предыдущих уроках мы уже сверстали несколько блоков лендинга с помощью flexbox и grid. Сейчас наша страница скорее всего хорошо выглядит только на широком экране — давайте исправим это.

Подготовка

Для начала убедитесь, что в <head> вашей страницы есть метатег viewport. Без него мобильные браузеры будут отображать страницу как уменьшенную десктопную версию:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
html

Чтобы увидеть, как страница выглядит на разных устройствах, откройте инструменты разработчика (Ctrl+Shift+I) и нажмите на иконку «Переключить панель устройств» (Ctrl+Shift+M). В этом режиме можно выбрать конкретное устройство или вручную задать ширину экрана.

Описание задания

Необходимо добавить к странице адаптивные стили, используя медиазапросы. Используйте подход desktop-first — базовые стили у вас уже написаны для широкого экрана, поэтому нужно добавить переопределения для меньших размеров с помощью max-width.

Используйте две точки останова:

  • 1024px — планшеты;
  • 768px — мобильные устройства.

Что нужно адаптировать

Навигация

На мобильных устройствах горизонтальный список ссылок может не умещаться. Переключите его в вертикальный режим и выровняйте по центру:

@media (max-width: 768px) {
  nav ul {
    /* подсказка: flex-direction и align-items */
  }
}
css

Блок с карточками фич (flexbox)

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

@media (max-width: 768px) {
  .features .list {
    /* подсказка: flex-direction */
  }

  .feature {
    /* подсказка: width */
  }
}
css

Блок с достопримечательностями (grid)

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

На планшетах замените сетку на две равные колонки. Не забудьте сбросить особое позиционирование для карточек с классами wide и tall, чтобы они не ломали сетку:

@media (max-width: 1024px) {
  .attractions .grid {
    /* подсказка: grid-template-columns */
  }

  .card.wide,
  .card.tall {
    /* подсказка: grid-column и grid-row */
  }
}
css

На мобильных замените сетку на одну колонку:

@media (max-width: 768px) {
  .attractions .grid {
    /* подсказка: grid-template-columns */
  }
}
css

Дополнительно — типографика и отступы

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

Ожидаемый результат

После выполнения задания страница должна:

  • корректно отображаться на экранах от 360px до 1440px и шире;
  • не иметь горизонтальной прокрутки на мобильных;
  • перестраивать все блоки (навигация, карточки фич, карточки достопримечательностей) в одну колонку на мобильных;
  • показывать двухколоночную сетку на планшетах.

В следующем уроке познакомимся с CSS-переменными — инструментом, который делает стили гораздо удобнее в поддержке и открывает новые возможности для адаптивной вёрстки.

Это платный урок

Купите полный доступ к курсу чтобы просматривать данный контент

Основы фронтенд разработки

Полный курс по основам веб-разработки с нуля: HTML, CSS и JavaScript. Вы сверстаете адаптивный лендинг, освоите анимации и работу с DOM, а в финале соберёте самостоятельный проект — интерактивный путеводитель по Санкт-Петербургу.

4990 ₽Скидка 20%
3990 ₽

Безопасные платежи обрабатываются сервисом Юкасса

Комментарии

Войдите, чтобы оставить комментарий