Итак. Представь ситуацию. Ты запарился, собрал красивый сайт: кнопочки сверкают, фотки блестят, шрифт — как с постера Dior. На компе — конфетка. Открываешь на телефоне — и... всё поехало: меню съехало, текст в полэкрана, кнопка "Купить" вообще улетела за горизонт. Красота, да? Вот за это фронтендерам и платят — чтобы сайт вёл себя в любой ситуации нормально, как воспитанный человек на семейном ужине. Это и есть адаптивный дизайн.
Говоря по-простому: адаптив — это когда сайт (или приложение) не орёт "я под Chrome на Windows только!", а тихо и уверенно перестраивается под iPhone, Android, планшет, холодильник с браузером — всё что угодно.
И вот теперь разберёмся, как сделать так, чтобы он не разваливался, не бесил и вообще был по кайфу. Погнали.
Первое: дизайн — не только про красоту, а про мозги
Забудь фотошопные макеты в духе "вот тут заголовок, а тут фоточка". Адаптивный дизайн начинается не с кода, а с мышления. Ты должен сразу думать: а как это будет выглядеть на айфоне SE 2016 года? А на ультрашироком мониторе у Пети-айтишника? Тут уже не до красоты — надо, чтобы не падало.
Мысленно проверь три штуки:
- Где контент? Главное — текст и действия.
- Куда он денется при сжатии?
- А что, если человек нажмёт пальцем? Или, прости господи, стилусом?
Если ты об этом не подумал — потом будешь страдать и проклинать своё дизайнерское прошлое. Лучше сразу делать макеты под несколько разрешений: мобильник, планшет, десктоп. Минимум. Даже просто на бумажке набросай — уже голова включается.
Второе: flex и grid — твои лучшие друзья
Теперь код. Если ты ещё лепишь блоки через float: left и margin: -300px, то у меня для тебя плохие новости: ты живёшь в 2010. Сейчас всё вертится на flexbox и CSS grid.
Flex — это как резиновый пластилин: тянется, сжимается, адаптируется. Очень удобно, когда у тебя, скажем, карточки товара. Ты говоришь: "Вот тут три карточки, а если экран маленький — пусть они будут в колонку". Flex сам всё сделает, как хорошая няня.
Grid — это уже про продвинутую верстку. Когда надо сказать: "Вот у меня шапка, вот футер, вот контент с сайдбаром — положи всё красиво". Grid как шахматная доска, только с CSS. Гибко, мощно, удобно. Но требует мозга. Лучше потестить на кошках.
Третье: медиа-запросы — не забывай, они как спецназ
Вот эти строчки в стиле @media (max-width: 768px) — да, это они. Медиа-запросы — это то, что позволяет тебе говорить браузеру: "Слушай, если экран меньше 768 пикселей — поменяй структуру, сделай всё попроще". Это как разные режимы для сайта: обычный, мини, супермини и режим «ой, я на часах Apple».
Ты можешь менять всё: шрифты, отступы, размер кнопок, даже скрывать элементы. Главное — не переборщи. Не надо делать сто пятьдесят вариантов. Важно ловить ключевые «переломные» точки: когда верстка реально начинает разваливаться.
Четвёртое: не забудь про пальцы и тач
На десктопе человек мышкой целится как снайпер. На мобиле — как кот лапой. Поэтому кнопки, выпадашки, меню — всё должно быть крупнее, проще, понятнее.
Никаких мелких иконок без подписей. Никаких ссылок, по которым можно попасть только в луже в автобусе. Подумай: человек держит телефон одной рукой, большой палец устал, вторая рука несёт кофе. Сделай так, чтобы ему не хотелось разбить экран от злости.
Пятое: изображения и текст — адаптируй тоже
Картинки по умолчанию — жрут трафик и ломают верстку. Используй srcset или picture, чтобы подгружались нужные размеры под нужное устройство. Зачем на мобильник закидывать 4K-фото в 5 мегабайт? Это же издевательство.
Шрифты — тоже. Делай через em или rem, а не пиксели. Тогда текст сам адаптируется. И не забудь про межстрочные интервалы — на маленьких экранах тесный текст — это как маршрутка в час пик.
Шестое: не всё решается версткой
Вот серьёзно. Иногда адаптив — это не «сжать и уместить», а переосмыслить. Возможно, на телефоне тебе вообще не нужен этот баннер, три боковых меню и карусель отзывов. Пользователю надо быстро — меню, текст, кнопка. Всё. Остальное — в утиль.
Ты же не пытаешься втиснуть шкаф-купе в туалет. Так и здесь — мобильная версия должна быть не обрезком десктопной, а самостоятельной нормальной штукой.
Седьмое: тестируй руками
И да — симуляторы в браузерах это круто, но пока ты сам не пощёлкаешь на айфоне, на Самсунге друга и на бабушкином планшете — ты не поймёшь, где оно ломается. Прям бери и заходи, смотри глазами пользователя. Там столько сюрпризов — как в коробке с суши на акцию.
В итоге?
Адаптивный дизайн — это не про понты, а про уважение к пользователю. Неважно, с чего он зашёл — сайт должен быть нормальный. Не идеальный, но нормальный. Чтоб всё нажималось, читалось и не бесило.
Сделать такой сайт — не ракетостроение. Надо просто включить голову, потестить, и не делать так, чтобы человеку хотелось закрыть вкладку с матом. А если ты дизайнер, то не рисуй сказку — рисуй реальность, где на экране 375 пикселей и палец толще кнопки.
Ну всё. Если было полезно — ты знаешь, что делать. А теперь — иди и сделай так, чтобы твой сайт не развалился у человека, который зашёл с холодильника.