Именно так думают многие новички... до тех пор, пока не откроют свой сайт на телефоне. 😅
Внезапно кнопки уехали за экран, текст стал размером с муравья, а картинка заняла половину вселенной. 🌚
На самом деле адаптивная верстка — это не просто несколько @media в CSS.
Вот что действительно делает сайт удобным 👇
📐 Гибкая сетка
Элементы должны растягиваться и сжиматься сами. Поэтому вместо фиксированных px часто используют %, fr, flex и grid.
📱 Контент важнее макета
На телефоне не обязательно сохранять расположение блоков как на компьютере. Иногда лучше перестроить страницу полностью, чем пытаться впихнуть всё в узкий экран.
🖼 Изображения тоже должны быть умными
Картинка шириной 3000px для маленького смартфона — это лишний вес и медленная загрузка. Хорошая адаптивность — это ещё и про производительность.
👆 Палец — не курсор мыши
На десктопе можно попасть в кнопку размером 20×20 пикселей. На телефоне — уже не факт. Поэтому нормальные отступы и крупные зоны нажатия — это не прихоть дизайнера, а необходимость.
⚡️ Адаптивность — это не только ширина экрана
Есть планшеты, складные смартфоны, огромные мониторы, разные плотности пикселей, горизонтальная ориентация... Хорошая верстка учитывает всё это.
💡 И самое интересное...
Многие начинают делать адаптивность в самом конце проекта. А потом неделю пытаются чинить сотни мелких багов.
Гораздо проще сразу верстать так, будто сайт будут открывать на любом устройстве. Тогда адаптация превращается не в боль, а в обычную часть разработки. 🚀
А вы что чаще используете для адаптивности? 🤔
🔥 Flexbox
❤️ CSS Grid
👍 Всё ещё спасаетесь @media и молитвами? 😄