Что такое медиа запросы css

Адаптивный веб-дизайн — Медиа-запросы

Медиа-запрос — это метод CSS, введенный в CSS3.

Он использует правило @media чтобы включить блок свойств CSS, только если выполняется определенное условие.

Пример

Если окно браузера имеет размер 600px или меньше, цвет фона будет светло-голубым:

Добавить брэкпоинт (точку перехода)

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

Медиа-запросы могут помочь с этим. Мы можем добавить брэкпоинт (точку перехода), когда определенные части проекта будут вести себя по-разному на каждом брэкпоинте.

Адаптивный веб-дизайн. Отображение на десктопе
Desktop
Адаптивный веб-дизайн. Отображение на мобильном телефоне
Phone

Используйте медиа-запрос для добавления брэкпоинта на 768 пикселей:

Пример

Когда экран (окно браузера) становится меньше 768 пикселей, ширина каждого столбца должна составлять 100%:

@media only screen and (max-width: 768px) <
/* Для мобильных телефонов: */
[class*="col-"] <
width: 100%;
>
>

Mobile First — Всегда первым дизайн для мобильных телефонов

Mobile First (мобильный первый) — означает проектирование для мобильных устройств до проектирования для настольного компьютера или любого другого устройства (это ускорит отображение страницы на небольших — мобильных устройствах).

Это означает, что необходимо внести некоторые изменения в CSS.

Вместо изменения стилей, когда ширина становится меньше чем 768px, необходимо изменить дизайн, когда ширина становится больше чем 768px. Это сделает дизайн Mobile First:

Пример

Ещё другие брэкпоинты

Вы можете добавить столько брэкпоинтов, сколько необходимо.

Можно вставить брэкпоинт между планшетами и мобильными телефонами.

Адаптивный веб-дизайн. Отображение на десктопе
Десктоп
Адаптивный веб-дизайн. Отображение на планшете
Планшет
Адаптивный веб-дизайн. Отображение на мобильном телефоне
Телефон

Это можно сделать, добавив ещё один медиа-запрос (с разрешением 600 пикселей) и набор новых классов для устройств размером более 600 пикселей (но меньше 768 пикселей):

Пример

Обратите внимание, что два набора классов практически идентичны, единственное отличие заключается в названии ( col- и col-s- ):

Может показаться странным, что у нас есть два набора идентичных классов, но это даёт нам возможность в HTML решать, что будет происходить со столбцами на каждом брэкпоинте:

HTML Пример

Для десктопа:

Первый и третий разделы будут занимать по 3 столбца каждый. Средняя часть будет охватывать 6 столбцов.

Для планшетов:

Первый раздел будет охватывать 3 столбца, второй — 9, а третий раздел будет отображаться под первыми двумя разделами и 12 столбцами:

Типичные брэкпоинты устройств

Существует множество экранов и устройств различной высоты и ширины, поэтому сложно создать точный брэкпоинт для каждого устройства. Для простоты вы можете выбрать пять групп:

Пример

/* Маленькие устройства (портретные планшеты и большие телефоны, 600px и выше) */
@media only screen and (min-width: 600px)

/* Средние устройства (альбомные планшеты, 768px и выше) */
@media only screen and (min-width: 768px)

/* Большие устройства (ноутбуки / десктопы, 992px и выше) */
@media only screen and (min-width: 992px)

/* Очень большие устройства (большие ноутбуки и десктопы, 1200px и выше) */
@media only screen and (min-width: 1200px)

Ориентация: Портрет / Альбом

Медиа-запросы также можно использовать для изменения макета страницы в зависимости от ориентации браузера.

У вас может быть набор CSS свойств, которые будут применяться только тогда, когда окно браузера шире его высоты, так называемая "альбомная" ориентация:

Пример

Веб-страница будет иметь светло-синий фон ориентации в альбомном режиме:

Скрыть элементы с медиа-запросами

Другое распространенное использование медиа-запросов — скрытие элементов на экранах разных размеров:

Пример

Изменить размер шрифта с помощью медиа-запросов

Вы также можете использовать медиа-запросы для изменения размера шрифта элемента на экранах разных размеров:

Переменный размер шрифта.

Пример

/* Если размер экрана составляет 601 пикселей или более, установите размер шрифта для <div> на 80px */
@media only screen and (min-width: 601px) <
div.example <
font-size: 80px;
>
>

/* Если размер экрана 600px или меньше, установите размер шрифта для <div> на 30px */
@media only screen and (max-width: 600px) <
div.example <
font-size: 30px;
>
>

CSS Справочник @media

Для полного обзора всех типов медиа и функций / выражений, пожалуйста, посмотрите на @media правила в CSS справочнике на нашем сайте W3Schools на русском.

Медиа-запросы

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

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

Синтаксис

Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Типы носителей перечислены в табл. 1.

Табл. 1. Типы носителей и их описание
Тип Описание
all Все типы. Это значение используется по умолчанию.
braille Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
embossed Принтеры, использующие для печати систему Брайля.
handheld Смартфоны и аналогичные им аппараты.
print Принтеры и другие печатающие устройства.
projection Проекторы.
screen Экран монитора.
speech Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
tty Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
tv Телевизоры.

Логические операторы, применяемые в медиа-запросах

Логическое И. Указывается для объединения нескольких условий.

Пример. Стиль для всех цветных устройств

Логическое НЕ. Указывается для отрицания условия.

Пример. Стиль для всех устройств кроме смартфонов

Оператор not имеет низкий приоритет и оценивается в запросе последним, поэтому выражение

следует понимать как

Применяется для старых браузеров, которые не поддерживают медиа-запросы.

Пример. Стиль для новых браузеров

В списке нет логического оператора ИЛИ, его роль выполняет запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно условие выполняется, то стиль будет применён.

Пример. Стиль для устройств с альбомной ориентацией или минимальной шириной 480 пикселов.

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

Медиа-функции

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

Большинство функций содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению. Так, max-width: 400px означает, что ширина окна браузера меньше 400 пикселов, а min-width: 1000px , наоборот, сообщает, что ширина окна больше 1000 пикселов.

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

Определяет соотношение ширины и высоты отображаемой области устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).

color (min-color, max-color)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 2 3 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное. В примере 1 показана такая проверка.

Пример 1. Стиль для цветных устройств

color-index (min-color-index, max-color-index)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

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

Пример 2. Цветной дисплей

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

Определяет соотношение сторон экрана устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/). В примере 3 показано, как установить стиль для экранов с соотношением сторон 16:9 и более.

Пример 3. «Киношное» соотношение

device-height (min-device-height, max-device-height)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную высоту экрана устройства или печатной страницы.

device-width (min-device-width, max-device-width)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную ширину экрана устройства или печатной страницы. В примере 4 в зависимости от разрешения монитора устанавливается ширина слоя. Так, для значения 1280 пикселов ширина макета задаётся как 1100px.

Пример 4. Ширина макета

HTML5 CSS3 IE Cr Op Sa Fx

Тип носителя: all
Значение: нет

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

Если вам требуется форматировать текст, не указывайте его размер в пикселах, для подобных устройств используется единица em (пример 5).

Пример 5. Размер букв

HTML5 CSS3 IE Cr Op Sa Fx

height (min-height, max-height)

Тип носителя: все кроме speech
Значение: размер

Высота отображаемой области.

monochrome (min-monochrome, max-monochrome)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксел. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В примере 6 показан стиль для монохромного и цветного принтера.

Пример 6. Стиль для принтера

orientation

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: landscape | portrait

Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).

В примере 7 устанавливается разная фоновая картинка в случае альбомной (landscape) или портретной ориентации (portrait).

Пример 7. Использование ориентации устройства

resolution (min-resolution, max-resolution)

Тип носителя: handheld, print, projection, screen, tv
Значение: разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр)

Определяет разрешение устройства, например, принтера. В примере 8 стиль будет работать для принтера с минимальным разрешением 300 точек на дюйм.

Пример 8. Разрешение принтера

Тип носителя: tv
Значение: interlace | progressive

Определяет тип развертки телевизора &#8212; череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.

width (min-width, max-width)

Тип носителя: все кроме speech
Значение: размер

Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В примере 9 при уменьшении окна до 600 пикселов и меньше меняется цвет фона веб-страницы.

Медиа-запросы CSS

Такое понятие, как медиа-запросы, появилось в CSS3. С их помощью можно определять внешний вид веб-страниц, опираясь на ширину и высоту окна браузера. Благодаря медиа-запросам вы можете параллельно создавать стили для небольших мобильных телефонов, планшетов, лэптопов и мониторов с большой диагональю.

Идея адаптивного дизайна — предоставить посетителям сайт в наиболее читаемой и привлекательной форме. Дизайн создается под как минимум три целевых экрана: настольный ПК, планшет и смартфон. Но учитывая большое количество вариаций этих девайсов, недостаточно остановиться на какой-то одной ширине для каждого типа устройства. Поэтому важно использовать гибкую сетку и проводить тестирование в процессе разработки, отслеживая то, как подстраивается дизайн сайта под разную ширину браузерного окна.

Когда использовать медиа-запросы?

Как правило, для адаптации дизайна веб-страницы необходимо прописать ряд CSS-стилей для определенных элементов. Ниже мы перечислим наиболее частые сценарии, когда вам понадобится обратиться к медиа-запросам.

  • Определение количества колонок. Трехколоночный макет сайта, который шикарно смотрится на настольных ПК, будет совсем неуместен для мобильных телефонов и планшетов. С помощью медиа-запросов можно переопределить количество колонок в макете с учетом ширины экрана устройства, сгруппировав для смартфонов весь контент в одну колонку.
  • Относительная ширина. Когда вы устанавливаете фиксированную ширину макета, скажем, в 960 пикселей, это подойдет для настольных компьютеров, лэптопов и некоторых особо крупных планшетов. Однако для мобильного телефона такой размер контейнера слишком большой. Используя медиа-запрос, можно специально для смартфонов создать «резиновый» макет, ширина которого будет не фиксированной, а относительной. Таким образом, контейнер шириной 100% будет легко подстраиваться под любой смартфон в любой ориентации.
  • Уменьшение отступов. Большие расстояния между блоками и элементами создают ощущение воздушного, легкого дизайна. Однако отступы, которые хорошо смотрятся на мониторе с диагональю 21-27 дюймов, будут выглядеть абсолютно безобразно на небольшом экране смартфона, к тому же принуждая пользователей больше прокручивать страницу. Медиа-запросы позволяют задать альтернативные размеры отступов для узких дисплеев.
  • Регулировка размера шрифта. Заголовки высотой в 60 пикселей могут красиво смотреться на десктопе, но для мобильных устройств такой размер шрифта редко когда уместен, поэтому для узких экранов будет целесообразным установить меньшее значение font-size.
  • Адаптивная навигация. Нередко бывает так, что навигационное меню, которое было продумано для десктопной версии сайта, совершенно не подходит для мобильных устройств ввиду своей объемности либо манеры расположения пунктов меню. Существует несколько подходов к реализации удобной навигации для мобильной версии сайта, и медиа-запросы непременно принимают в этом участие.
  • Скрытие элементов. Некоторые части веб-страницы могут быть бесполезными либо малозначимыми, если сайт просматривается с мобильного телефона. С помощью свойства display: none и медиа-запросов вы можете скрыть определенные элементы от глаз посетителя, если он зашел на сайт со смартфона. Но имейте в виду, что подобный прием не экономит трафик: скрытые элементы по-прежнему будут загружаться браузером.

Конечно, это далеко не все ситуации, когда применяются медиа-запросы.

Breakpoints (контрольные точки)

При помощи медиа-запросов вы можете создавать так называемые контрольные точки (англ. breakpoints) и привязывать к ним CSS-стили. К примеру, можно определить для браузера следующие правила: «Если ширина экрана составляет больше чем 767 пикселей, к веб-странице применяются эти стили, а если ширина экрана составляет больше чем 991 пиксель, применяются другие стили». Вот эти числа, обозначающие ширину экрана, и называются контрольными точками.

Какую ширину необходимо указывать в контрольных точках? Наиболее простой ответ: ту, на которой верстка веб-страницы начинает ломаться. Представим, что у вас есть сайт с контейнером шириной 1180 пикселей. Тогда в окне шириной 1200 пикселей (учитываем полосу прокрутки) или меньше он, скорее всего, будет выглядеть не очень хорошо. Вот и ваша первая контрольная точка: необходимо внести правки в дизайн, если сайт просматривается в окне шириной менее чем 1200 пикселей.

При создании гибких сеток часто применяется определенный набор медиа-запросов, предусмотренный для трех различных контрольных точек: смартфон, планшет, монитор ПК. Контрольных точек может быть и больше. Например, в Bootstrap 4 используется четыре контрольных точки в одном направлении и еще четыре — в обратном направлении:

Кроме этого, в Bootstrap задействуются еще несколько вариаций контрольных точек для записи стилей под конкретный диапазон ширины экранов. При этом используются сразу оба условия — для минимума и для максимума:

Mobile First или Desktop First?

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

  • Desktop First. При этом подходе вы сначала полностью верстаете дизайн для больших экранов, без использования медиа-запросов. После этого, используя контрольные точки в медиа-запросах, корректируете дизайн под средние и маленькие экраны (уменьшаете шрифт, перестраиваете макет, скрываете второстепенные элементы и т. п.). Преимущество такой верстки заключается в том, что старые браузеры (к примеру, Internet Explorer 8), которые не знают, что такое медиа-запросы, смогут отобразить ваш сайт, поскольку это исходный дизайн, который вы писали без использования директивы @media .
  • Mobile First. Если вы выбираете данный подход, то сначала верстаете дизайн для самых маленьких экранов, не используя медиа-запросы. После этого, создавая контрольные точки, вы корректируете верстку под все более и более широкие экраны.

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

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

Чтобы добавить медиа-запрос в таблицу стилей, запишите следующее:

Внутрь скобок медиа-запроса поместите стили CSS, как вы делаете это обычно:

Желательно размещать все медиа-запросы под обычными стилями, а не над ними. Если вы используете контрольные точки, отталкиваясь от минимальной ширины экрана ( min-width ), размещайте их в порядке возрастания ширины экрана. Если вы применяете max-width , тогда расположите медиа-запросы в порядке уменьшения ширины. В противном случае одни медиа-запросы будут перезатирать предыдущие.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *