Адаптив

Адаптив - сайт одинаково удобен на телефоне, планшете и компьютере. Начинайте с мобильной версии.

Порядок работы

1. Добавьте в head: <meta name="viewport" content="width=device-width, initial-scale=1">.
2. Верстайте сначала для 375 px, затем расширяйте через @media (min-width: ...).
3. Используйте flex, grid, rem, clamp() вместо фиксированных пикселей.
4. Проверьте ширины 375, 768, 1280 px.
5. Кнопки и ссылки - не меньше 44x44 px.

Типичные ошибки

• Горизонтальная прокрутка на телефоне.
• Фиксированная ширина блоков.
• Мелкий текст (меньше 16 px).

Чек-лист

• Нет горизонтальной прокрутки на 375 px
• Тексты читаемы
• Меню работает на телефоне

Проверка в браузере: навык browser-qa и режим устройств DevTools.