Скил «Адаптив»: вёрстка, которая не ломается на телефоне

Контрольные ширины 320–1440px, fluid-типографика на clamp(), безопасные сетки на minmax. Финал — тест на реальном телефоне.

Шаги

1. 1Проверьте текущее поведение на контрольных ширинах

   320px (маленький телефон), 375px, 768px (планшет), 1024px, 1440px. На каждой: нет горизонтальной прокрутки, текст читаем, кнопки попадают под палец (44×44px минимум).

2. 2Переведите типографику на fluid-значения

   clamp() вместо фиксированных пикселей: заголовок сам плавно меняется между мобильным и десктопным размером. Медиазапросы оставьте для структурных перестроений.

3. 3Пересмотрите сетку

   Flexbox с wrap и auto-fill/minmax для карточек вместо фиксированного числа колонок. Контентные колонки — max-width ~65–75 символов, по краям жидкие поля.

   ПРОМПТ ДЛЯ АГЕНТА

   Ты — верстальщик. Вот CSS моей страницы: [вставьте стили]. Найди всё, что сломается на 320–375px: фиксированные ширины, переполнения, мелкие кликабельные зоны. Предложи правки на fluid-типографике (clamp), fluid-сетке (minmax) и безопасных отступах.

   📋 Скопировать промпт⚡ Обкатать

4. 4Проверьте медиа и таблицы

   Картинки — srcset (см. скилл «Картинки без веса»). Таблицы на мобильном: горизонтальный скролл внутри контейнера или перестройка в карточки. Длинные слова и URL — overflow-wrap.

5. 5Прогон на реальном устройстве

   Эмулятор не показывает реальный тач, шрифтовой рендеринг и 3G. Десять минут с телефоном находят то, что час в DevTools — нет.

✅ Сделал материал, если:

• ☐Нет горизонтальной прокрутки на 320px
• ☐Типографика на clamp(), а не фиксированный px
• ☐Кликабельные зоны не меньше 44×44px
• ☐Таблицы и широкие медиа не ломают мобильную вёрстку
• ☐Проверено на реальном телефоне, а не только в эмуляторе