Адаптивный веб-дизайн (далее АВД) - это не какая-то программа или фреймворк. Можно сказать, что это комбинация различных концепций, с помощью которых мы стараемся сделать так, чтобы наша веб-страница хорошо выглядела на всех устройствах.
Самое замечательное, что вы можете достичь АВД, используя только HTML и CSS ⚡
1️⃣ Первое и самое главное, чтобы сделать АВД - это использовать тег <meta> viewport.
Данный тег заставляет страницу следовать ширине экрана устройства.
2️⃣ Второй важный момент, который следует учесть, заключается в том, чтобы не использовать большие элементы фиксированной ширины или высоты.
Это может вызвать проблемы при отображении. Допустим, элемент имеет ширину 500 пикселей, но пользователь просматривает его на устройстве, ширина которого меньше 500 пикселей.
В таких случаях используйте минимальную ширину (min-width) или максимальную ширину (max-width).
3️⃣ Используйте HTML-тег <picture>
Тег HTML <picture> позволяет определять какие изображения показывать для разных размеров окон браузера.
4️⃣ Адаптивный размер текста
Вы можете сделать текст адаптивным с помощью медиа-запросов. Но также вы можете использовать ширину "viewport" для задания размера шрифта.
5️⃣ Используйте макеты для веб-страниц
Используйте сетку (Grid) или гибкий макет (Flexbox) для того, чтобы сделать веб-страницу отзывчивой. Оба эти макета нетрудно выучить.
6️⃣ Используйте box-sizing: border-box
CSS свойство box-sizing определяет как вычисляется общая ширина и высота элемента.
Значение border-box говорит браузеру учитывать любые границы и внутренние отступы в значениях, которые вы указываете в ширине и высоте элемента. Если вы выставите элементу ширину 100 пикселей, то эти 100 пикселей будут включать в себя границы и внутренние отступы, а контент сожмётся, чтобы выделить для них место.
Даже небольшая граница 4px может повредить адаптивности. Поэтому важно не забывать про это свойство при вёрстке макета.
7️⃣ Медиа-запросы - спаситель адаптивности
Медиа-запрос (@media) - это правило, включающее блок CSS свойств, которое выполнится только в том случае, если выполняется определенное условие. Это очень полезно для того, чтобы сделать АВД.
8️⃣ Используйте "auto" для медиафайлов
Почти 99% веб-страниц содержат изображения или видео. И для того, чтобы сделать их отзывчивыми, используйте "auto".
Если свойству width присвоено значение в процентах, а высоте - значение "auto", изображение будет пропорционально изменять высоту.
9️⃣ Используйте фреймворки, если это возможно
Если вы пишете веб-сайт на чистом CSS, то адаптивность такого сайта может отнимать много усилий.. Попробуйте использовать фреймворки, так как они могут сэкономить много времени на разработке адаптивного веб-сайта.
Итого
Это основные моменты, которые стоит учесть при создании адаптивного веб-сайта. Со временем данные принципы закрепятся у вас в голове, и вы будете придерживаться их инстинктивно. Но на первое время лучше подглядывать в эту шпаргалку.
Если руководство было полезным для вас, ставьте лайки и пишите об этом в комментариях!