- Разбираем инструменты разработчика
- Метатег вьюпорт
- Добавляем правило
>= 800px
- Удаляем метатег и смотрим на дефолтный вьюпорт
- Добавляем правило
- Медиа-запросы в SASS:
- вложенность
- Переменные для брейкпоинтов
- Адаптивная и отзывчивая вёрстка, почему это (почти) одно и тоже
- Как определить брейкпоинты по макету
- Mobile-first CSS
- Смотрим макет
- Гибридная вёрстка: отзывчивая на телефоне, дальше адаптивная
- Стили контейнера
- Стили секции features. Формула расчёта ширины элемента
.features {@extend %list;}
- Скрытый вторичный контент (секция reviews)
- Как посмотреть страницу на телефоне если дома wifi
- Модальное окно на телефоне
- Разметка и стили кнопки-переключателя
- Скрипт
- Разметка бургер-меню
- Стили бургер-меню
- Переключение иконки по
.menu-button.is-open
- Переключение иконки по
- Медиа-выражения
- Как определить когда убирать бургер не привязываясь жёстко к макету