Как использовать медиа-запросы в CSS?
Что такое медиа-запросы в CSS
Медиа-запросы — это особые правила применения CSS, с помощью которых можно менять стиль элементов, отталкиваясь от устройств, на которых будут просматривать веб-страницу.
Проще говоря, они позволяют понять, какие именно стили нужно запускать на выбранной странице, а какие — нет. Например, с ними сайт одинаково удобно и красиво отображается на экране смартфона или большом мониторе.
Медиа-запросы стали актуальными в CSS3. На сегодня они поддерживаются всеми современными браузерами, среди которых Chrome, Opera, Firefox, Safari.
Ключевая задача медиа-запросов — адаптивный дизайн сайта. Благодаря им внешний вид страниц будет варьироваться, исходя из размеров монитора или экрана.
Овладеть тонкостями работы с CSS запросами можно на курсах наших партнеров в Mate Academy, Robot Dreams, Powercode Академия.
Синтаксис медиа-запросов
Запись медиа-запросов в теле сайта выглядит вот так:
@media условие { /* стили, которые становятся активными при соответствии условию }
Можно добавлять их в HTML-части сайта, внутри таблицы CSS, а также напрямую в код страницы. Если речь идет о старых браузерах, то можно подключить специальную JavaScript-библиотеку, чтобы медиа-запросы функционировали корректно.
Главные виды устройств, которые можно прописывать в медиа-запросах:
- все устройства —
all
; - устройства с экранами —
screen
; - синтезаторы речи —
speech
; - принтеры или страница предварительного просмотра для печати —
print
.
Когда-то раньше также использовались:
- проекторы —
projection
; - телевизоры —
tv
; - смартфоны и другие мобильные устройства —
handheld
.
Но в современной версии media queries 4 их принято считать устаревшими.
Также медиа-запросы могут содержать в себе логические операторы, такие как:
and
— все условия должны выполняться одновременно;-
,
— хотя бы одно из условия должно выполняться, аналогично «или»; not
— отрицание условия (имеет более низкий приоритет, чемand
, а значит будет выполняться после него).
Для составления условий можно использовать некоторые функции:
width
(max-width
иmin-width
) — определяет требования к ширине браузера, наибольшее и наименьшее значения этого параметра в пикселях или других единицах:@media(width: 720px)
;height
,min-height
иmax-height
— прописывает требования к высоте браузера, аналогично функциям ширины:@media (max -height: 1080px)
;color
определяет количество бит на канал цвета (также есть значенияmin
иmax
);aspect-ratio
(min-aspect-ratio
,max-aspect-ratio
) — отношения ширины к высоте:@media screen and (device-aspect-ratio: 1920/1080)
;orientation
— оценивает режим отображения страницы: портретный (portrait
) или альбомный (landscape
);resolution
(min-resolution
,max-resolution
) — это разрешение устройства ввода: требуемое, минимальное и максимальное; измеряется в dpi, dpcm или dppx.
Какие бывают медиа-запросы
Медиа-запросы могут записываться в виде атрибута для элемента link
. Это помогает определить, какие файлы CSS-таблиц нужно активировать на странице в зависимости от характеристик устройства. Такой функционал чаще всего используется, когда к разным типам технического оборудования применяются разные стили CSS.
Приведем в пример фрагмент кода, который иллюстрирует подключение файла styles-xs.css
для устройств, размер экрана которых меньше 543 пикселей:
<link rel="stylesheet" media="screen and (max-width: 543px)" href="styles-xs.css">
Также подобные запросы можно включать в состав правила @import
, отвечающего за импорт стилей из других CSS-файлов. Так, для того же файла можно записать следующий код:
@import url(styles-xs.css) (max-width: 543px);
Медиа-запросы можно реализовывать для Bootstrap 3 и Bootstrap 4. Например, можно прописать media queries в порядке увеличения размеров для нескольких классов устройств:
@media (min-width: 768px) { /* Стили для устройств с маленьким экраном, размерами 768px - 991px (планшеты и подобные) */ } @media (min-width: 992px) { /* Стили для ноутбуков и компьютеров с экранами в диапазоне 992px - 1199px */ } @media (min-width: 1200px) { /* Стили для устройств с большой шириной экрана >1200px */ }
Использовать эти медиа-запросы нужно исключительно в таком порядке. Если вы хотите применять их в произвольной последовательности, то добавьте в них максимальное значение. То есть укажите полноценный диапазон размеров экранов в Bootstrap 3:
@media (max-width: 767px) { ... } @media (min-width: 768px) and (max-width: 991px) { ... } @media (min-width: 991px) and (max-width: 1199px) { ... } @media (min-width: 1200px) { ... }
Если же речь идет о медиа-запросах в Bootstrap 4, то можно написать такое постепенное увеличение наименьшей ширины экрана:
@media (min-width: 576px) { /* CSS для экранов размером: 576px – 767px */ } @media (min-width: 768px) { /* CSS для: 768px – 991px */ } @media (min-width: 992px) { /* CSS для: 992px – 1119px */ } @media (min-width: 1200px) { /* CSS для экранов больше 1200px */ }
Подобные запросы, но с максимальным значением можно применять в в обратном порядке, чтобы шло убывание размеров экрана. Если вы хотите писать медиа-запросы в рандомной последовательности в таблице стилей, то укажите точные промежутки, то есть сразу пропишите min-width
и max-width
. Тогда фрагмент кода будет выглядеть вот так:
@media (max-width: 575px) { ... } @media (min-width: 576px) and (max-width: 767px) { ... } @media (min-width: 768px) and (max-width: 991px) { ... } @media (min-width: 992px) and (max-width: 1199px) { ... } @media (min-width: 1200px) { ... }
Заключение
Медиа-запросы — важный элемент создания оптимизированного дизайна сайта. Они управляют стилями, ориентируясь на технические параметры устройств. Это означает, что CSS-таблицы будут активироваться только после определения того, где именно запускается ресурс. В общем виде медиа-запрос будет состоять из ключевого слова, объявляющего тип устройства, а также выражения для проверки его характеристик.
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: