Адаптивные страницы и медиа запросы

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

Видео находится в разработке

Краткий конспект урока:

Медиа-запросы (media queries) – это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Иными словами, это конструкции, которые позволяют определять на основании некоторых условий какие стили необходимо использовать на веб-странице, а какие нет.

Создание медиа-запроса начинается с ключевого слова @media после которого указывается одно или несколько условий. В качестве условия можно указывать тип устройства или требования к определённой характеристике. Требование к определённой характеристике записывается в круглых скобках.

Комбинирование нескольких условий выполняется с помощью логических операторов.

После составления @media, стили, указанные в нём, будут применяться только в том случае, когда итоговый результат вычисления условий является истинной.

Пример медиа-запроса с комбинированием нескольких условий:

@media (min-width: 992px) and (max-width: 1199.98px) { ... }

В @media можно указывать определённые типы устройств:

• all – для всех;
• print – для принтеров и в режиме предварительного просмотра страницы перед печатью;
• screen – для устройств с экранами;
• speech – для программ чтения с экрана.

Mobile first (сначала мобильные устройства), в отличии от Desctop first (сначала экраны компьютеров) это стратегия разработки сайта, согласно которой изначально сайт создается под мобильные устройства, с последующей адаптацией под планшеты и ПК с помощью медиа-запросов.