Адаптивный дизайн (responsive design)

Главная » Видеоуроки » HTML+CSS » Адаптивный дизайн (responsive design)

В этом видеоуроке мы поговорим о создании адаптивного дизайна. В современном мире люди все больше заходят на сайты с мобильный устройств (смартфоны и планшеты). Поэтому мало сделать красивый дизайн сайта. Важно сделать дизайн, который смотрелся приятно и был удобен в использовании не только за компьютером, но и на смартфонах и мобильных телефонах.

Прежде чем работать над адаптивным дизайном, нужно добавить мета тэг:

Подробнее о необходимости этого тега можно почитать статью.

После этого мы перейдем к написанию media queries (медиа запросов). Медиа запросы — это условия, при котором будут срабатывать описанные внутри этого условия css правила.

Пример медиа запроса:

При создании адаптивного дизайна (написании медиа запросов), при его тестировании рекомендую использовать консоль Google Chrome

В ней выделим три области, на которые стоит обратить внимание:
1 — устройства для эмуляции режима просмотра.
2 — Ориентация устройства (портрет или ландшафт)
3 — Применяемые в данный момент css правила.

В заключении важно отметить о рекомендации не использовать min-device-width. Подробнее об этом можно прочитать у google.
Про медиа запросы можно прочитать здесь.
Также прикрепляю ресурс со списком медиа запросов для основных устройств.

Подписаться на рассылку

Будьте в курсе - получайте последние статьи на свой email

Ваша подписка успешно оформлена

Pin It on Pinterest

Share This