Домашнее задание
Задача: проведите ревью одной страницы (своей или из прошлых уроков) на типовые дефекты раскладки: горизонтальный скролл от
100vw, отсутствие box-sizing: border-box, фиксированные height, «магические» пиксели, !important и спрятанный overflow.1
Найдите грабли
Откройте страницу в DevTools на ширине 320px (Ctrl+Shift+M). Отметьте горизонтальный скролл, обрезанный текст и блоки, вылезающие за контейнер. Поиском по CSS найдите 100vw, !important и круглые пиксельные значения.
2
Исправьте по таблице «ошибка → лечение»
Для каждого дефекта примените лечение из справочника: max-width: 100%, box-sizing: border-box, min-height, переменные/относительные единицы, нормальный каскад вместо !important. Зафиксируйте, что и почему изменили.
3
Перепроверьте
Снова откройте на 320px и с длинным тестовым текстом. Убедитесь: скролла нет, ничего не обрезано, блоки внутри контейнера. Сверьтесь со своим чеклистом из заданий.
Критерий зачёта: ни одного горизонтального скролла на узком экране и ни одного
!important/100vw без обоснования в комментарии.