07

RWD

Адаптивная верстка

Цель: изучить и применить принципы отзывчивой верстки (RWD) и mobile-first.

Содержание и порядок выполнения лабораторной работы:

  1. Изучить принципы адаптивной и отзывчивой верстки:

    • Принцип mobile-first;
    • Создание и использование медиа-запросов;
    • Типы устройств;
    • Метатег viewport;
    • Адаптивные изображения;

  2. Применяя принцип mobile-first, сделать страницу отзывчивой к отображению на экранах разной ширины от 320px до 2560px (медиа-запросы с несколькими точками перехода и возможности flexbox и grid);

  3. Добавить недостающие элементы в разметку html;

  4. Использовать для скрытия элементов на мобильной версии display: none, для контента, который есть в десктопной версии и отсутствует в мобильной;

  5. Добавить медиа запросы для перестроения макета, чтобы он хорошо выглядел на любой ширине экрана. Использовать минимум 2 точки перехода (breakpoint) и обосновать их выбор;

  6. Добиться адекватного перестроения макета при уменьшении/увеличении ширины экрана, не должна появляться горизонтальная полоса прокрутки и большие области пустоты между контентом;

  7. Зафиксировать результаты работы с помощью системы контроля версий git и отправить репозиторий на github.

  8. Загрузить проект на хостинг.

Требования к html и css:

  • Страница должна соответствовать принципам адаптивной верстки:
    • Не появляется горизонтальная полоса прокрутки.
    • При изменении ширины экрана от 320px до 2560px макет адекватно перестраивается;
    • Изображения адаптивны и изменяют свой размер;
    • Текст читаем на любых устройствах.
  • Код html и css отформатирован;
  • Корректное использование тегов;
  • Корректно выбранные форматы изображений;
  • Отсутствие ошибок на валидаторе для html и css.

Результаты выполнения лабораторной работы:

Результаты работы проверены наставником.

Статическая веб-страница на хостинге, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.

Источники

  1. MDN: Отзывчивый дизайн
  2. Doka: media
  3. Стандарт W3 Media Queries (EN)
  4. Отзывчивые изображения (EN)
  5. Приложение для проверки отзывчивости - https://responsively.app/

Вопросы для защиты

  1. В чем заключается принцип mobile-first?
  2. Из чего состоит медиа-запрос?
  3. Как работает max-width и min-width в медиа-запросе?
  4. Какие есть подходы к выбору точек перехода?
  5. Для чего в RWD используется <picture> и атрибут srcset?
  6. Для чего нужен тег viewport?
Задать вопрос наставнику
Предыдущая Следующая