Адаптивный веб-дизайн: практическое руководство для начинающих

Более половины посещений приходится на телефоны, поэтому сайт, работающий только на компьютере, теряет посетителей. Адаптивный дизайн позволяет одному сайту подстраиваться под любой экран.

1. Добавьте тег viewport

Включите <meta name="viewport" content="width=device-width,initial-scale=1"> в head. Без него телефоны показывают уменьшенную версию для компьютера.

2. Проектируйте сначала для мобильных

Пишите базовый CSS для маленьких экранов, затем добавляйте правила для больших через медиазапросы min-width. Так мобильные страницы остаются лёгкими и простыми.

3. Используйте гибкие макеты

CSS Grid и Flexbox позволяют содержимому естественно переноситься и менять размер. Правило grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) создаёт адаптивную сетку без медиазапросов.

4. Делайте изображения гибкими

Задайте max-width: 100% и height: auto для изображений и используйте атрибут srcset, чтобы отдавать маленьким экранам файлы поменьше.

5. Используйте относительные единицы

Для текста и отступов предпочитайте rem, em, проценты и clamp() вместо фиксированных пикселей, чтобы макеты масштабировались плавно.

6. Тестируйте на реальных устройствах

Меняйте размер окна, используйте панель устройств в инструментах разработчика и проверьте на настоящем телефоне. Ищите слишком мелкий текст, кнопки, на которые трудно нажать, и горизонтальную прокрутку.