​Медиа запросы в адаптивной верстке

Медиа-запросы это одна из основных концепций данной технологии и без ее глубокого понимания освоить адаптивную верстку просто не получится.

История медиа-запросов началась еще с далекого 2002 года, с правила @media, которое появилось в спецификации CSS2. Тогда это была относительно простая технология, которая позволяла выводить различные стили в зависимости от типа устройства. Со временем технология развивалась, стала более совершенной в CSS2.1, но оценить полную мощь данной технологии веб-разработчики смогли только после выхода спецификации CSS3.

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

В CSS3 спецификации в обработке правила @media появилась полноценная работа с размерами устройства и экрана устройства. Именно благодаря этой поддержке появилась возможность делать адаптивные сайты. Рассмотрим медиа-запросы более внимательно.

Структура медиа-запроса

@media [not|only] type [logical] (expression) {
  CSS код
}

@media – объявление правила
not – оператор отрицания, используется для отрицания всего последующего выражения
only – оператор позволяет скрыть медиа-запросы от браузеров, которые их не поддерживают
type – тип устройства
logical – логический оператор (и или или) позволяет лучше управлять логикой медиа-запроса
expression – выражение проверяющее характеристики устройства

Медиа-функции
Медиа-функции - это набор операторов, позволяющих проверять те или иные технические характеристики и свойства устройств. Они позволяют производить тонкую настройку запроса. Медиа-функции способны проверять следующие параметры:

Ширина (min-width, max-width) – позволяет применить стили в зависимости от ширины видимой части.
Высоты (min-height, max-height) – позволяет применить стили в зависимости от высоты видимой части.
Ширина устройства (min-device-width, max-device-width) – позволяет применить стили в зависимости от ширины устройства.
Высота устройства (min-device-height, max-device-height) – позволяет применить стили в зависимости от высоты устройства.
Разрешение (min-resolution, max-resolution) – позволяет применить стили в зависимости от разрешения.
Ориентация (orientation) – позволяет применить стили в зависимости от ориентации устройства.
Соотношение ширины и высоты (min-aspect-ratio, max-aspect-ratio) – позволяет применить стили в зависимости от соотношения сторон видимой части.
Соотношение ширины и высоты устройства (min-device-aspect-ratio, max-device-aspect-ratio) – позволяет применить стили в зависимости от соотношения сторон устройства.
Цветность (min-color, max-color) – позволяет применить стили в зависимости от соотношения сторон устройства.
Количество поддерживаемых цветов (min-color-index, max-color-index) – позволяет применить стили в зависимости от количества поддерживаемых цветов.
Монохромность (min-monochrome, max-monochrome) – позволяет применить стили в зависимости от монохромности и количества оттенков серого.
Сетка (grid) – позволяет применить стили в зависимости от поддержки устройством фиксированной сетки.

👉 @frontendInterview