05

RWD

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

Цель: изучить принципы отзывчивой верстки (RWD) и mobile-first, создания адаптивных изображений, использования разных единиц измерений; приобрести навыки верстки статических адаптивных веб-страниц.

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

  1. Подготовка к выполнению лабораторной работы – изучение принципов адаптивной и отзывчивой верстки:

    • Принцип mobile-first;
    • Создание и использование медиа-запросов;
    • Типы устройств;
    • Метатег viewport;
    • Шаблоны поведения макета;
    • Адаптивные изображения;
    • Тег picture, source, атрибут scrset;
    • x и w дескрипторы и их применение.

  2. Принять задание по ссылке https://classroom.github.com/a/rx-EH4Bi. Клонировать репозиторий и приступить к работе по заданию. Разработка по этой лабораторной работе должна вестись в отдельной ветке.

  3. Скачать макет по варианту и загрузить его на сервис figma. Ссылка на макеты. Проанализировать графический макет, продумать структуру страницы.

  4. Сформировать структуру папок и файлов проекта для изображений, стилей с учетом одного из подходов в SCSS.

  5. Заверстать мобильную версию, так чтобы она адекватно смотрелась при большой ширине экрана.

    При верстке страницы использовать:

    • методологию BEM для именования классов,
    • SCSS для создания стилей,
    • принципы отзывчивости (медиа-запросы с несколькими точками перехода и возможности flexbox и grid),
    • адаптивные изображения (scrset с одним из дескрипторов, picture с несколькими source);

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

  7. Страница должна соответствовать принципам адаптивной верстки:

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

  8. Через инструменты разработчика создать в нем новое устройство и проверить поведение страницы.

  9. Проверить валидность HTML и CSS кода страницы, исправить все ошибки.

  10. Разместить страницу на сервере факультета fit.mospolytech.ru, и создать запрос на слияние на github.com

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

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

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

Источники

  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>?
  6. Как работают атрибуты scrset с w- и x-дескриптором?
  7. В чем разница w и x дескрипторов?
  8. Для чего нужен тег viewport?
Предыдущая Следующая