Адаптивная страница сохраняет задачу человека при изменении ширины окна. Проверяй не только готовые снимки на телефоне и desktop, но и поведение между ними: где текст перестаёт помещаться, какой блок должен перейти ниже и как пользователь доберётся до основного действия.
Контрольные точки — это пробы, не стандарт
Начни около 320–375 CSS px, продолжи на 768 px и 1280–1440 px; добавь 1920+ для широкого экрана. Это удобные тестовые точки, а не обязательные размеры для каждого сайта. Изменяй ширину постепенно около фактического breakpoint: если сетка перестраивается на 768 px, проверь 767 и 769.
Подставь длинное название, сообщение об ошибке и раскрытое меню; увеличь масштаб браузера. Так обнаружатся фиксированная высота, white-space: nowrap, абсолютное позиционирование и кнопки, перекрытые sticky footer. Тестируй таблицы, модальные окна и навигацию, а не только hero.
Ограничивай контент, позволяй ему расти
Задавай тексту разумный max-width, изображениям — max-width: 100%, а сетке — ограничения вроде minmax() и clamp(). min-width: 0 у элемента flex/grid позволяет длинному тексту переноситься, вместо того чтобы расширять родителя. Не назначай каждой карточке фиксированную высоту без нужды.
Для широкой таблицы выбери осознанное представление: внутреннюю горизонтальную прокрутку, карточки или сокращённые колонки с доступом к остальным данным. На узком экране оставь видимыми поля, нужные для принятия решения, и проверь, что пользователю понятно, где искать скрытые сведения. Не уменьши шрифт до нечитаемого размера.
| Область | Проверка |
|---|---|
| 320–375 px | Навигация, поля, CTA, перенос заголовка и отсутствие overflow |
| По обе стороны breakpoint | Сетка не обрезает содержимое при переключении |
| 768 px | Колонки, промежутки и поведение таблицы |
| 1280–1920+ px | Читаемая длина строки, ограниченная ширина и центрирование |
Исправляй причину переполнения
Если карточка вылезла за экран на 360 px, найди виновника: конкретный DOM-элемент, ширину, длинный токен, изображение или grid track. Не соглашайся на overflow-x: hidden, пока не проверено, что оно не скрывает недоступную часть. После изменения повтори исходный размер и соседнюю точку.
Проверь динамические компоненты: меню, dropdown, cookie banner и фиксированную CTA могут перекрыть содержимое при исправной сетке. У scroll-контейнера проверь доступ с клавиатуры; у модального окна — прокрутку и возврат фокуса. При эмуляции помни, что DevTools не проверяет физический touch target — при важном сценарии нужен тест на устройстве.
Баг записывай воспроизводимо: браузер, CSS-ширина, zoom, URL, состояние данных и шаги. Например: «375 CSS px, zoom 200%, кнопка сохранения выходит за карточку /settings». После исправления повтори этот сценарий. Для скриншотных референсов сначала выдели сетку и tokens, затем отдельно проверь адаптивное поведение в руководстве по вёрстке из screenshot. Общие основы responsive layout описаны в MDN; WCAG даёт более широкие требования доступности (W3C).