RWD

Цель: изучить основы отзывчивой верстки (RWD).

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

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

   • принцип mobile-first;
   • создание и использование медиа-запросов;
   • типы устройств;
   • метатег viewport;
   • шаблоны поведения макета;

2. Выполнение:

   • добавить, где требуется группирующую обертку в виде элемента div с классом wrapper. Его код приведен ниже.
   • применяя принцип mobile-first сделать страницу отзывчивой к отображению на экранах разной ширины от 360px до 2560px;
   • добавить недостающие элементы в разметку html для насольной версии;
   • использовать для скрытия элементов на мобильной версии display: none; потом с помощью медиа-запросов их отобразить;
   • использовать минимум 2 точки перехода (breakpoint) и обосновать их выбор;
   • добиться адекватного перестроения макета при уменьшении/увеличении ширины экрана, не должна появляться горизонтальная полоса прокрутки и большие области пустоты между контентом;

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

Wrapper

Конкретные значения максимальной ширины и внутренних отступов сверьте с вашим макетом.

.wrapper {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

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

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

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

• Удобочитаемый код;
• Отсутствие ошибок на валидаторе для html и css;

Дополнительные источники

1. Doka: media
2. MDN: Отзывчивый дизайн
3. Styling Layout Wrappers In CSS
4. Приложение для проверки отзывчивости

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

1. В чем заключается принцип mobile-first?
2. Из чего состоит медиа-запрос?
3. Как работает max-width и min-width в медиа-запросе?
4. Какие есть подходы к выбору точек перехода?