My first student project Web Studio as part of the Full Stack Developer course GO IT. Final homework assignment №8. Used Technologies (HTML, CSS, JAWASCRIPT, SASS, BEM).
- Создай репозиторий
goit-markup-hw-08. - Склонируй созданный репозиторий и скопируй в него файлы предыдущей работы.
- Выполни вёрстку адаптивной версии всех страниц и элементов макета домашнего задания #8.
- Настрой
GitHub Pagesи добавь ссылку на живую страницу в шапку GitHub-репозитория.
«A1» Используется методология BEM.
«A2» Ипользуется препроцессор SASS.
«A3» В файлах index.html и portfolio.html подключен минифицированный
файл стилей main.min.css из папки css.
«A4» При просмотре страницы на любом устройстве шириной от 320px, не появляется горизонтальная полоса прокрутки.
«A5» Скрипт мобильного меню подключен в HTML отдельным файлом
mobile-menu.js.
«B1» У всех страниц в блоке <head> есть метатег viewport.
«B2» Все фоновые и контентные растровые изображения - отзывчивые, и поддерживают экраны с плотностью x1 и x2.
«B3» Для отзывчивых контентных изображений использован элемент <img> с
атрибутом srcset и дескриптором x.
«B3» Для отзывчивых фоновых изображений использованы медиа-фукцнии
min-device-pixel-ratio и min-resolution.
«B4» Выполнена разметка мобильного меню.
«C1» При написании стилей использован Mobile First подход и
медиа-функция (min-width: ).
«C2» Стили необходимые только в определённом промежутке, закрыты в
медиа-запросы (min-width: ) and (max-width: ) или только (max-width: ).
«C3» В медиа-запросах отсутствует лишнее дублирование стилей.
«C4» Вёрстка выполнена относительно трёх точек перелома: 480px, 768px и
1200px.
«C5» Выполнено оформление мобильного меню.
Формула расчёта ширины flex-элемента в сетке .element { flex-basis: calc((100% - кол-во маржинов в строке * значение маржина) / кол-во элементов в строке); }
-
Модальное окно на телефоне
-
Разметка и стили кнопки-переключателя
-
Скрипт
-
Рарметка бургер-меню
-
Стили бургер-меню
- Переключение иконки по
.menu-button.is-open
- Переключение иконки по
-
Медиа-выражения
-
Как определить когда убирать бургер не привязываясь жёстко к макету
-
Отзывчивые изображения
- Проблема базовых изображений и width 100%
- Стили для отзывчивого изображения (max-width)
- Плотность пикселей экрана и ретинизация
-
Отзывчивый элемент
<img>- Имитация плотности пикселей в devtools
- Атрибут
srcset - Дексриптор
x - Дексриптор
w - Атрибут
sizes - Отзывчивая галерея (порядок медиа-запросов)
-
Фоновые изображения по конспекту
- Пару слов про
image-set()
- Пару слов про
-
Элемент
<picture>
