Как проверять адаптивную вёрстку
Тестируем промежуточные ширины, длинный текст, увеличение масштаба и реальные сценарии.
Зачем это нужно
Адаптивность нельзя подтвердить одним снимком телефона и одним снимком монитора. Ошибки часто появляются между контрольными точками, когда меню уже тесно, но медиазапрос ещё не переключился.
Меняйте ширину постепенно
Сужайте область от широкой к узкой. Следите за карточками, таблицами, меню и формами. Найдите ширину, где содержимое начинает мешать, и выбирайте breakpoint по этой проблеме.
Усложните содержимое
Добавьте длинный заголовок, URL без пробелов, несколько дополнительных пунктов и сообщение об ошибке. Макет должен работать с реальными вариациями, а не только с короткими подписями из примера.
Проверьте масштаб и взаимодействие
Увеличьте масштаб до 200% и пройдите страницу клавиатурой. Области клика не должны перекрываться. Встроенная эмуляция удобна, но при возможности проверяйте важные сценарии на настоящем устройстве.
Важное ограничение
Контрольная проверка
- Проверены ширины между медиазапросами.
- Длинные слова не растягивают страницу.
- Текст увеличивается без обрезки.
- Таблицы имеют отдельную прокрутку при необходимости.
Продолжить изучение: медиазапросы, запросы контейнера.