🎯 Вступление:
Я часто вижу сайты, которые на десктопе выглядят как чемпион на подиуме, а на телефоне — будто после неудачной тренировки без разминки. 🤦♂️
Адаптивная верстка — это не магия, а дисциплина: она требует внимания к деталям и правильной техники.
Когда я впервые делал адаптив под три устройства, думал, что “оно само подстроится” — но всё развалилось, как штанга без замков.
💡 Основная часть:
1️⃣ Ошибка: фиксированные размеры
Использовать width: 1200px; — всё равно что застрять в одной весовой категории.
Как исправить:
Используй относительные единицы:
width: 100%;
max-width: 1200px;
А для шрифтов — em, rem, vw, vh.
2️⃣ Ошибка: забытый viewport
Без него браузер не понимает, что ты хочешь “подогнать” сайт под экран.
Как исправить:
Добавь в <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3️⃣ Ошибка: медиа-запросы “на глазок”
Если ты ставишь @media (max-width: 768px) просто потому, что “так все делают”, ты теряешь контроль.
Совет: тестируй под реальные устройства. Используй Chrome DevTools → Responsive mode.
4️⃣ Ошибка: игнорирование ретины
На экранах с высоким DPI твои иконки выглядят как после диеты.
Решение:
Используй SVG или двойные изображения (@2x).
5️⃣ Ошибка: плавающие отступы
Когда паддинги и маргины ведут себя как новичок в спортзале — то много, то мало.
Лайфхак:
Задавай адаптивные отступы через clamp():
padding: clamp(1rem, 2vw, 2rem);
6️⃣ Ошибка: разные блоки ломают поток
Когда один элемент "тянет одеяло" на себя, макет рушится.
Используй флексы и гриды:
display: flex;
flex-wrap: wrap;
И пусть каждый элемент держит свою “позицию”.
7️⃣ Ошибка: тест только на одном устройстве
Это как тренироваться только одной рукой — результат кривой.
Проверь сайт на:
- iPhone / Android
- планшетах
- старых браузерах (через BrowserStack, например)
🏁 Финал:
Адаптив — это не спринт, а марафон дисциплины. Но если выстроить технику, результат будет как у атлета на пике формы.
Подписывайся, ставь 💪 и пиши, какая ошибка попадалась тебе!
💪 Прокачиваем не только мышцы, но и цифровые