Что такое адаптивный дизайн?

Представьте, что вы играете в свою любимую игру на большом экране компьютера. Все выглядит идеально. Потом берешь трубку и открываешь ту же игру — но все мелко, загромождено и трудно читается. Раздражает, не так ли?

Сайты одинаковые! Хорошие веб-сайты должны хорошо и удобно выглядеть на любом устройстве — большом мониторе компьютера, планшете или маленьком телефоне. Это называется адаптивный дизайн. Сегодня мы простым языком объясним вам эту волшебную технику!

Что такое адаптивный дизайн?

Адаптивный дизайн означает, что веб-сайт автоматически адаптируется к размеру экрана пользователя. Как только вы напишете код, сайт будет отлично выглядеть как на больших, так и на маленьких экранах:

До 2010-х годов веб-сайты разрабатывались только для компьютеров. Пришлось создавать отдельную версию для телефона.
Сегодня достаточно одного дизайна.

Почему адаптивный дизайн важен?

Более 70% людей в Азербайджане и мире выходят в Интернет со своих телефонов.
Сайты, не оптимизированные для мобильных устройств, опускаются в результатах поиска Google.
Если пользователь обнаруживает, что сайт работает медленно или запутанно, он немедленно уходит.

Хороший адаптивный сайт = больше посетителей + более счастливые пользователи!

Основные методы

1. Медиа-запросы (правило, основанное на размере экрана): мы пишем в CSS специальные правила, которые «если экран меньше 600 пикселей, он должен выглядеть вот так».

2. Flexbox и Grid — современные инструменты компоновки: эти инструменты автоматически располагают элементы и изменяют их положение при изменении размера экрана.

3. Адаптивность изображений и текста:

Изображения автоматически масштабируются с помощью параметра max-width: 100%;
Для изменения размера текста используются единицы измерения rem и em.

4. Метатег Viewport (очень важно!): Если вы не добавите его в раздел <head> вашего HTML-кода, ваш сайт не будет корректно работать на мобильных устройствах:

Практический пример: Простая адаптивная карточка

Следующий код отобразит 3 карточки рядом на большом экране и перевернутыми на телефоне:

В HTML

В CSS

Изучение адаптивного дизайна — это не только технический навык, но и умение думать о пользователях. Хороший фронтенд-разработчик всегда задает вопрос: «Как этот сайт будет выглядеть на моем телефоне?»

Попробуйте сами!

Лучший способ освоить адаптивный дизайн — это сразу же начать практиковаться. Выберите простой проект — например, небольшой сайт о ваших любимых играх. Сначала убедитесь, что он хорошо выглядит на компьютере, а затем протестируйте его на телефоне, добавив медиа-запросы CSS.

Каждый раз, когда вы меняете размер экрана и смотрите на результат, вы будете узнавать что-то новое. Это самая интересная часть настоящей фронтенд-разработки!

Хотите применить эти знания на практике и получить реальные результаты? Начните обучение на курсе «IT и Компьютерная инженерия» и шаг за шагом приобретайте практические навыки. Подробнее о курсе — перейдите по ссылке: Курс «IT и Компьютерная инженерия».

Вы можете начать сегодня — все, что вам нужно, это компьютер, браузер и немного любопытства.

Теги:

веб-программирование фронтенд адаптивный дизайн HTML CSS