Главная → Android → Использование медиа-запросов. Медиа-запросы Медиа запросы css

Использование медиа-запросов. Медиа-запросы Медиа запросы css

CSS правило @media используется для изменения CSS стилей на основании определенных характеристик устройства, связанных с отображением контента, таких как ширина, высота, ориентация, разрешение экрана и так далее. Имеет широкое применение в адаптивном веб-дизайне.

Поддержка браузерами

Свойство			Opera		IExplorer	Edge
@media	21.0	3.5	9.0	4.0	9.0	12.0

CSS синтаксис:

@media not | only media type and (media function ) { ...код CSS }

Давайте детально разберем из чего состоит синтаксис этого правила.

Логические операторы

Вы можете комбинировать медиазапросы с использованием логических операторов:

Значение	Описание
and	Оператор and ("И" ) используется для объединения нескольких медиазапросов в один.
not	Оператор not ("Логическое НЕ" ) обращает результат - если медиазапрос был истинным без "not" , то он станет ложным , и наоборот.
only	Оператор only ("Только" ) может использоваться для скрытия таблиц стилей от устаревших браузеров, которые не могут обработать медиазапрос (игнорируют), содержащий в себе этот логический оператор.
,	Оператор "," позволяет объединить несколько медиазапросов через запятую. Если хотя бы один запрос возвращает "true" (соответствует), то условие выполняется и стили будут применены. Этот оператор ведет себя как логический оператор OR ("ИЛИ" ).

Устройства (media type)

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

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

Мультимедийные функции (media function)

Значение	Описание
aspect-ratio	Соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Например: aspect-ratio : 5/4 (соотношение пять к четырем).
color	Определяет количество бит на цветовую компоненту устройства вывода. Если устройство не является цветным устройством, то это значение равно нулю. . Например, если дисплей использует по 4 бита на красный и синий, а 5 бит на зеленый, то считается, что устройство использует 4 бит на цветовой компонент.
color-index	Количество цветов, которое устройство может отображать.
device-aspect-ratio	Соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Например: device-aspect-ratio : 5/4 (соотношение пять к четырем). Media Queries Level 4 " .
device-height	Определяет высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " .
device-width	Определяет ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " .
grid	Определяет основано ли выходное устройство на сеточной системе (например, терминал "tty" или дисплей телефона с одним фиксированным шрифтом), в этом случае значение будет равно 1 , если устройство растровое, то значение будет равно 0 .
height	Задает высоту области просмотра (используются ).
max-aspect-ratio	Максимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали.
max-color	Определяет максимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения .
max-color-index	Максимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются.
max-device-aspect-ratio	Масимальное соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Значение считается устаревшим и удалено из "Media Queries Level 4 " .
max-device-height	Определяет максимальную высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " .
max-device-width	Определяет максимальную ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " .
max-height	Задает максимальную высоту области просмотра (используются единицы измерения CSS).
max-monochrome	Указывает максимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. .
max-resolution	Указывает максимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (dpi ), так и в точках на сантиметр (dpcm ).
max-width	Задает максимальную ширину области просмотра (используются единицы измерения CSS).
min-aspect-ratio	Минимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали.
min-color	Определяет минимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения .
min-color-index	Минимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются.
min-device-aspect-ratio	Минимальное соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Значение считается устаревшим и удалено из "Media Queries Level 4 " .
min-device-height	Определяет минимальную высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " .
min-device-width	Определяет минимальную ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " .
min-height	Задает минимальную высоту области просмотра (используются единицы измерения CSS).
min-monochrome	Указывает минимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа .
min-resolution	Указывает минимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (dpi ), так и в точках на сантиметр (dpcm ).
min-width	Задает минимальную ширину области просмотра (используются единицы измерения CSS).
	Указывает количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа .
orientation	Определяет, находится ли область просмотра в режиме альбомной ориентации - экран шире, чем высота, или в портретной ориентации - высота дисплея больше или равна ширине. Для альбомной ориентации используется значение: orientation : landscape , а для портретной и orientation : portrait .
resolution	Указывает разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (dpi ), так и в точках на сантиметр (dpcm ).
scan	Указывает метод сканирования устройства вывода. Слово сканирование, используемое в этом контексте, не относится к сканеру изображений, например к сканеру, используемому для оцифровки фотографии. Скорее, это означает процесс, посредством которого изображение рисуется на телевизионном экране (или другом устройстве). Для того, чтобы указать тип развертки устройства, необходимо указать одно из значений: череcстрочная развертка - (interlace ), прогрессивная развертка (progressive ).
width	Задает ширину области просмотра (используются единицы измерения CSS).

Мультимедийные функции (Media Queries Level 4)

media = "mediatype rel = "stylesheet" href = "stylesheet.css" >

Обратите внимание, что в этом случае используется в качестве значения атрибута media тот же синтаксис, что и при использовании правила @media .

Подключение медиазапросов с использованием тега 2. Используя CSS правило @media внутри HTML тега
Обратите внимание, что при использовании атрибута media тега 2. Используя CSS правило @media внутри HTML тега
Кроме того, Вы можете использовать правило @import , которое позволяет копировать стили из других CSS файлов:
@import url ("main.css" ) (min-width :481px ) and (max-width :768px ); /* импортируем содержимое файла css, который предназначается для устройств с разрешением экрана, находящегося в диапозоне от 481 пикселей до 768 пикселей / @import url ("print.css" ) print; / импортируем содержимое файла css, который предназначается для печатных страниц и для режима предварительного просмотра печати / @import url ("protv.css" ) projection, tv; / импортируем содержимое файла css, который предназначается для устройств проекционного типа и телевизионного типа / @import url ("file.css" ) screen and (orientation :landscape ); / импортируем содержимое файла css, который предназначается для экранов компьютера И альбомной ориентации.*/
Учтите тот факт, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь необходимо скачать и проанализировать (создается дополнительный запрос к серверу). Исходя из правил и рекомендаций PageSpeed Insight (Google ), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import .

Медиазапросы, используемые в Bootstrap 4

В этом разделе мы с Вами рассмотрим основные медиазапросы, которые используются в Bootstrap 4 . Bootstrap это HTML , CSS и Javascript фреймворк для создания адаптивных страниц.

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

Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция min-width ) используются в Bootstrap 4 :

// Small devices (landscape phones, минимальная ширина области просмотра 576px и выше) @media (min-width : 576px ) { ...код CSS } // Medium devices (tablets, минимальная ширина области просмотра 768px и выше) @media (min-width : 768px ) { ...код CSS } // Large devices (desktops, минимальная ширина области просмотра 992px и выше) @media (min-width : 992px ) { ...код CSS } // Extra large devices (large desktops, минимальная ширина области просмотра 1200px и выше) @media (min-width : 1200px ) { ...код CSS }

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

Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция max-width ) используются в Bootstrap 4 :

// Extra small devices (portrait phones, максимальная ширина области просмотра 576px и ниже) @media (max-width : 575.98px ) { ...код CSS } // Small devices (landscape phones, максимальная ширина области просмотра 768px и ниже) @media (max-width : 767.98px ) { ...код CSS } // Medium devices (tablets, максимальная ширина области просмотра 992px и ниже) @media (max-width : 991.98px ) { ...код CSS } // Large devices (desktops, максимальная ширина области просмотра 1200px и ниже) @media (max-width : 1199.98px ) { ...код CSS }

В Bootstrap 4 существуют также точки останова направленные на определенный сегмент размеров экрана с использованием минимальной и максимальной ширины области просмотра (мультимедийные функции min-width и max-width ):

// Small devices (landscape phones, минимальная ширина области просмотра 576px и максимальная ширина области просмотра 768px) @media (min-width : 576px ) and (max-width : 767.98px ) { ...код CSS } // Medium devices (tablets, минимальная ширина области просмотра 768px и максимальная ширина области просмотра 992px) @media (min-width : 768px ) and (max-width : 991.98px ) { ...код CSS } // Large devices (desktops, минимальная ширина области просмотра 992px и максимальная ширина области просмотра 1200px) @media (min-width : 992px ) and (max-width : 1199.98px ) { ...код CSS }

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

Аналогичным образом медиазапросы могут охватывать несколько сегментов точек останова:

// Medium and Large devices (tablets and desktops, минимальная ширина области просмотра 768px и максимальная ширина области просмотра 1200px) @media (min-width : 768px ) and (max-width : 1199.98px ) { ...код CSS }

Настройка области просмотра

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

Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:

name = "viewport" content = "width=device-width, initial-scale = 1" >

Атрибут name задает имя документа метаданным, значение "viewport" дает подсказку браузеру о размере начального размера области просмотра. Функция атрибута content задать значения для этого атрибута.
Значение width=device-width атрибута content сообщает, что ширина страницы устанавливается в соответствии с размером экрана устройства в аппаратно-независимых пикселях (device-independent pixel, dip ), что позволяет странице пересчитывать положение элементов для корректного отображения на различных экранах. По аналогии допускается указать значения для высоты height=device-height .
Значение initial-scale=1 атрибута content сообщает браузеру, что необходимо установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства (альбомной или портретной).

Если все страницы Вашего сайта адаптированы для просмотра на мобильных устройствах, то размещение вышеуказанного мета тега является обязательным.

Доступные значения:

Значение атрибута	Определение
width	Определяет ширину в пикселях области просмотра (значение - положительное целое число или device-width ).
height	Определяет высоту в пикселях области просмотра (значение - положительное целое число или device-height ).
initial-scale	Определяет соотношение между шириной устройства (device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра. Чем больше число, тем выше масштаб. Значение - положительное целое число от 0.0 до 10.0.
minimum-scale	Определяет минимальное значение zoom (оно должно быть меньше или равно maximum-scale ). Значение - положительное целое число от 0.0 до 10.0.
maximum-scale	Определяет максимальное значение zoom (оно должно быть больше или равно minimum-scale ). Значение - положительное целое число от 0.0 до 10.0.
user-scalable	Логическое значение, которое определяет, может ли пользователь увеличить масштаб веб-страницы. Значение по умолчанию yes (пользователь может увеличивать масштаб).

Версия CSS

CSS3

Пример использования

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

Для просмотра страниц пользователями мы установим следующие CSS стили:

h2 { color : brown ;} p { color : red ;} body

Следующие CSS стили мы будем использовать при печати и предварительном просмотре страницы:

@media print { h2, p { color : #000 ;} body }

Окончательный файл CSS будет выглядеть следующим образом:

h2 { color : brown ;} /* устанавливаем цвет элемента - коричневый */ p { color : red ;} /* устанавливаем цвет элемента - красный */ body { background-color : khaki ;} /* устанавливаем цвет заднего фона - хаки */ @media print { /* устанавливаем правило для печатных страниц и для режима предварительного просмотра печати */ h2, p { color : #000 ;} /* групповой селектор устанавливает цвет элементов - черный */ body { background-color : #FFF ; } /* устанавливаем цвет заднего фона - белый */ }

Обращаю Ваше внимание на важный момент! Если вы используете какое-то правило до того как установлены основные стили, то они не будут работать без использования значения !important , которое отменяет значимость последнего определенного стиля, т.е отменяет конфликты стилей и делает приоритетным тот стиль, который имеет значение !important .

Другими словами, если мы разместим правило @media print { } в начале таблицы стилей, то оно не будет работать без значения !important для конфликтующих стилей (а у него это все стили):

@media print { /* устанавливаем правило для печатных страниц и для режима предварительного просмотра печати */ h2, p { color : #000 !important ;} /* групповой селектор устанавливает цвет элементов - черный */ body { background-color : #FFF !important ; } /* устанавливаем цвет заднего фона - белый */ } h2 { color : brown ;} /* устанавливаем цвет элемента - коричневый */ p { color : red ;} /* устанавливаем цвет элемента - красный */ body { background-color : khaki ;} /* устанавливаем цвет заднего фона - хаки */

Теперь свяжем наш файл CSS (css_pr_media.css ) с документом, используя элемент :

rel = "stylesheet" href = "../css_pr_media.css" >

HTML разметка примера:

Пример использования CSS правила @media<span> rel = "stylesheet" href = "../css_pr_media.css" >

Рапаны

Рапаны (лат. Rapana) - род хищных брюхоногих моллюсков из семейства Muricidae. Распространены в морях Тихого и Индийского океанов. С 1947 года встречается в Черном море. Длина раковины до 12-15 см. Раковина широкоовальной формы, завиток низкий, последний оборот вздут, серовато-коричневого цвета со спиральными рёбрами и осевыми утолщениями. Активные хищники, питающиеся двустворчатыми мелкими моллюсками, например, мидиями и устрицами, раковины которых они открывают при помощи своей сильной мускульной ноги. Молодые рапаны с помощью своего покрытого зубчиками языка-сверла делают отверстия в раковинах своих жертв и раскрывают их. Обитают на любых типах дна, передвигаясь с помощью мускулистой ноги.

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

Сейчас в нашу жизнь вошло столько устройств, которые позволяют свободно бороздить интернет, что уже не отвечают веениям времени еще недавно преобладающие методы верстки сайтов. Так-как сейчас все больше как маленьких экранов мобильных смартфонов, так и больших экранов десктопов. Я как-то об этом не задумывался и как обычно делал свои сайты под экраны 1024px. Но посмотрев разрешение экранов посещающих мои сайты в яндекс метрике, был удевлен что 1024px уже не актуален и разнообразие разрешений просто огромное. А трафик с маленьких экранов мобильных устройств состовляет почти 20%. Вот скриншот из яндекс метрики одного из моих сайтов, о котором пойдет речь далее.

Разрешения экранов

Основные разрешения экранов, посещающие сайт, статистика за месяц

Получается что на каких-то устройствах сайт отображается очень мелко, на каких-то с горизонтальной прокруткой, а на больших экранах с пустыми полями по бокам и сайт выглядит очень маленьким. Так-же и гугл оповестил что "ваш сайт не оптимизирован для мобильных устройств". Ниже пример как сайт выглядил до оптимизации на разных разрешениях от мобильников 240*320px, до 1920*1200px.

Скриншот сайта на разных экранах

Скрин сайта на разрешении дисплеев 320px 800px 1280px 1920px

Приступив к оптимизации я первым делом добавил мета тег в body сайта. Сервис гугл для проверки оптимизации сказал что "сайт оптимизирован". Но на самом деле это не так. Данный тег заставляет сайт отображаться пиксель в пиксель, то-есть в зависимости от фактического разрешения экрана, определяет область просмотра. Так например на 320*480px будет отображаться только кусочек сайта, а на больших экранах пустые области.

Для отображения сайта пиксель в пиксель

Ниже код, который заставляет отображать сайт пиксель в пиксель на всех устройствах. И если у маленького экрана разрешение к примеру 6дюймов и 1280*800, то сайт будет малюсенький. А если экран 320*480px, то на экране отобразится кусочек сайта этих размеров. В данном примере значение 1:1, то-есть рано 1.0. Можно ставить свои значения и увеличивать или уменьшать сайт. К примеру на андроид и apple область просмотра сайтов 960-1024px, это значит что сайты с такой шириной будут отображаться на весь экран и без прокрутки, и это не зависит от фактического разрешения экрана, сайт просто масштабируется под размер экрана, Но если добавить этот тег То сайт начнет отображаться в соответствии с аппаратными пикселями, и если разрешение маленькое, то сайт будет слишком крупным и появится прокрутка, а если разрешение большое, то сайт будет маленьким. По-этому один этот viewport ничего не решает, он просто отображает сайт в соответствии с аппаратными пикселями, и отменяет настройки браузеров, что не правильно так-как у браузеров могут буть свои настройки.

Верстка сайта под разные экраны

Чтобы адаптировать сайт я добавил в boby сайта вот этот список мета тегов. viewport - заставляет сайт отображаться в соответствии с пикселями устройства. screen and - позволяет назначать CSS стили в зависимости от разрешения экрана. Так например запись Указывает что для экранов с разрешением меньше 640px нужно применить стиль из файла style.css Так-же можно указывать стили в одном файле или распределить по разным css файлам. В css файле стиль для экранов как в данном примере max-width:640px делается так /*для мобильных устройств*/ @media screen and (max-width: 640px) { aside {width:98%;} article {width:98%;} #container {font-size:120%;} #razdeli_opisanie {width:95%;} } @media screen and (max-width: 1024px) { body {font-size:85%;} } @media screen and (min-width: 1280px) { body {font-size: 100%;} . Стили css назначаются с помощью @media screen and (min-width: ХХХpx) @media screen and (max-width: 640px) { ваши стили } Так-же можно указать стили для конкретных экранов, например (width: 480px), но сейчас там много разрешений что смысла нет писать большой css фаил чтобы для каждого конкретного экрана написать свои правила отображения. Я просто сделал резиновую верстку сайта в основных стилях. И если например разрешение экрана меньше (max-width: 640px), то все блоки у меня растягиваются по ширине экрана. А если экран от 640-1024px (max-width: 1024px), то я меняю только шрифт body {font-size: 85%;}, так-как по умолчанию он в браузерах 16px, а я его делаю 14px. Если разрешение (min-width: 1280px), то-есть 1280px и более, то я просто увеличил шрифт до 100%, а сайт в основной верстке расстягивается по ширине экрана.

То-есть я сделал резиновую верстку сайту, и подкорректировал указав некоторые css правила для отдельных разрешений экрана. В итоге сайт стал выглядеть вот так.

Скриншоты сайта е ветерок ру

Скриншоты в размерах 320px 640px 800px 1024px 1280px 1920px

Надеюсь что вам стало понятно как сделать. Думаю как сделать основную резиновую верстку вы и так знаете. Я к примеру все размеры указал в процентах (%) вместо пикселей (px). И указал дополнительно стили под различные разрешения экранов. Но этот сайт я пока не адаптировал под разные экраны, на момент написания этой статьи размеры сайта указаны 995px и все размеры в px.

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

Медиа для разных типов устройств

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

@media print { ... }

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

@media screen, print { ... }

Список устройств вы можете найти перейдя по этой ссылке . Но для задания более детальных и узконаправленных правил вам нужно просмотреть следующий раздел.

Узконаправленные @media

Media features описывают некие характеристики определенного user agent , устройства вывода или окружения. Например, Вы можете применить выбранные стили только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещенности. В примере ниже стили будут применены только когда основное устройство ввода пользователя (например мышь) будет расположено над элементами:

@media (hover: hover) { ... }

Many media features are range features , which means they can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints. For example, this CSS will apply styles only if your browser"s viewport width is equal to or narrower than 12,450px:

@media (max-width: 12450px) { ... }

If you create a media feature query without specifying a value, the nested styles will be used as long as the feature"s value is non-zero. For example, this CSS will apply to any device with a color screen:

@media (color) { ... }

If a feature doesn"t apply to the device on which the browser is running, expressions involving that media feature are always false. For example, the styles nested inside the following query will never be used, because no speech-only device has a screen aspect ratio:

@media speech and (aspect-ratio: 11/5) { ... }

For more media feature examples, please see the for each specific feature.

Создание комплексных медиа запросов

Sometimes you may want to create a media query that depends on multiple conditions. This is where the logical operators come in: not , and , and only . Furthermore, you can combine multiple media queries into a comma-separated list ; this allows you to apply the same styles in different situations.

In the previous example, we"ve already seen the and operator used to group a media type with a media feature . The and operator can also combine multiple media features into a single media query. The not operator, meanwhile, negates a media query, basically reversing its normal meaning. The only operator prevents older browsers from applying the styles.

Note: In most cases, the all media type is used by default when no other type is specified. However, if you use the not or only operators, you must explicitly specify a media type.

and

The and keyword combines a media feature with a media type or other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:

@media (min-width: 30em) and (orientation: landscape) { ... }

To limit the styles to devices with a screen, you can chain the media features to the screen media type:

@media screen and (min-width: 30em) and (orientation: landscape) { ... }

comma-separated lists

You can use a comma-separated list to apply styles when the user"s device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user"s device has either a minimum height of 680px or is a screen device in portrait mode:

@media (min-height: 680px), screen and (orientation: portrait) { ... }

Taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true.

not

The not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The not keyword can"t be used to negate an individual feature query, only an entire media query. The not is evaluated last in the following query.

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

Например, за ширину окна конкретного девайса: настольного монитора, смартфона или планшета, а в случае с последними двумя также и за ориентацию в пространстве (альбомная или книжная или по-буржуйски landscape и portrait).

Принцип действия медиа-запросов

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

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

В самом простом виде медиа-запрос какбэ говорит: «Если окно браузера не более такого-то размера (задано в пикселях), то показывать сайт так-то и так-то… ».

@media screen and (max-width: 1000px) {
#content {
width: 75%;
float: left;
}
#sidebar {
width: 25%;
float: right;
}
}

Здесь медиа-запрос говорит, что если ширина экрана не более 1000 пикселей, то ширина основного блока (content) составит 75%, а ширина боковой колонки (sidebar) будет 25%. Надеюсь, все помнят, что в адаптивной верстке используется принцип «резиновой» разметки, поэтому все размеры в %, а не в пикселях.

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

Обратите внимание на синтаксис. Медиа-запрос - это типичный набор правил и заключен в фигурные скобки. Но в отличие от обычных правил CSS, в него могут входить другие наборы правил, также заключенные в фигурные скобки, причем друг от друга они никакими знаками не отделяются. Такой себе своеобразный вложенный дополнительный набор правил а ля «все в одном».

Позвольте, но ведь есть и гораздо меньшие устройства, как с этим быть? Очень просто! Пишем еще один медиа-запрос:

@media screen and (max-width: 480px) {
#content {
width: 100%;
float: none;
}
#sidebar {
width: 100%;
float: none;
}
}

Данный медиа-запрос говорит, что если ширина экрана окажется менее 480 пикселей, то сработает новый набор правил, где у обоих блоков ширина 100% и отменено обтекание. Очень удобно и наглядно.

Также очень легко можно настроить стили для отображения сайта в книжной или альбомной ориентации экрана. Например:

@media screen and (max-width: 320px) and (orientation: portrait) {
#content {
width: 75%;
float: none;
}
#sidebar {
width: 25%;
float: none;
}
}

@media screen and (max-width: 480px) and (orientation: landscape) {
#content {
width: 80%;
float: none;
}
#sidebar {
width: 20%;
float: none;
}
}

Эти два медиа-запроса говорят следующее: «Если экран не более 320 пикселей и расположен вертикально, то ширина основного блока составит 75%, а боковой колонки 25%. А если ширина не более 480 пикселей и расположение горизонтальное, то соответственно 80% и 20%.

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

Кроме того, в медиа-запросе можно устанавливать диапазон ширины экрана от минимального до максимального:

@media screen and (min-width: 200px) and (max-width: 480px) {
#content {
width: 80%;
float: none;
}
#sidebar {
width: 20%;
float: none;
}
}

Данная запись говорит, что набор правил этого медиа-запроса будет работать на устройствах (или при размере окна браузера настольного монитора) от 200 до 480 пикселей. Если будет больше или меньше, то правила не сработают. Иногда удобнее задавать именно диапазон действия медиа-запроса.

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

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

height - высота области просмотра;
device-width - ширина поверхности, на которой происходит просмотр (т.е. непосредственно ширина экрана конкретного девайса);
device-height - высота поверхности, на которой происходит просмотр;
orientation - ориентация экрана устройства (книжная или альбомная);
aspect-ratio - соотношение ширины и высоты в зависимости от ширины и высоты области просмотра. Например, широкоэкранный дисплей с соотношением сторон 16:9 может быть указан, как aspect-ratio: 16/9;
color - количество бит на каждый из цветовых компонентов. Например, min-color: 16 будет означать, что экран конкретного устройства имеет 16-битную глубину цвета;
и др.

На практике чаще всего используется только значение ширины области просмотра - width . Остальные характеристики пока еще экзотика. Есть некоторая разница между width и device-width . Об этом я, пожалуй, напишу отдельный пост, чтобы не перегружать тему. Скажу лишь, что использование device-width бывает полезным, когда ориентируешься на конкретный девайс. Фишка тут вот в чем:

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

В результате, если вы в медиа-запросе зададите набор правил @media screen and (max-width: 480px) , используя простой width , то на смартфоне все равно увидите сайт так, словно он просматривается на большом мониторе, только все будет очень мелким.

Происходит такая нестыковка как раз по причине «запаса» браузера мобильного устройства. Чтобы этого не случилось, нужно использовать в медиа-запросе не просто width , а именно device-width . Либо применять такую штуку как мета-тег viewport , но об этом в следующий раз.

Где лучше всего размещать медиа-запросы?

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

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

Можно, конечно, использовать для вставки медиа-запросов команду @import , подгружая дополнительный файл стилей, но делать это нецелесообразно, т.к. уменьшает скорость загрузки сайта и не всегда корректно работает.

Как изменить html разметку в медиа-запросе

Нет ничего проще! Обычно медиа-запросы размещаются в том же файле стилей CSS, что и остальные правила, но в самом конце. Иногда их выносят в отдельный файл.

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

На этом по медиа-запросам все. Демо-сайт в качестве примера будет разобран в одной из ближайших статей. Так что оставайтесь на связи! И пишите вопросы в комментариях.

Нам нравится работать с данными. Мы уделяем много времени изучению аналитической информации о наших веб-сайтах. Любой веб-разработчик, которому это тоже интересно, наверняка заметил, насколько увеличился в последнее время объем трафика с мобильных устройств. За последний год значительно вырос процент просмотров страниц наших основных сайтов со смартфонов и планшетных ПК. Это значит, что все больше посетителей используют устройства с современными браузерами, поддерживающими последние версии HTML, CSS и JavaScript. Однако ширина экранов таких устройств обычно ограничена 320 пикселями.

Реализация

Начнем с того, что семантическая разметка содержания упрощает перекомпоновку страниц в случае необходимости. С помощью таблицы стилей мы создали резиновый макет . Это первый шаг на пути к достижению нашей цели. Вместо атрибута width для контейнеров мы стали указывать max-width . Атрибут height был заменен атрибутом min-height , чтобы крупный шрифт или многострочный текст не нарушал границы контейнера. Чтобы картинки с фиксированной шириной не ломали резиновые столбцы, применяется следующее правило CSS:

Img { max-width: 100%; }
Резиновый макет – хорошая идея, но использование такой компоновки накладывает некоторые ограничения. К счастью, медиа-запросы теперь поддерживаются всеми современными браузерами , в том числе IE9+ и браузерами основной части мобильных устройств. Это позволяет создавать сайты, качество отображения которых в мобильных браузерах не снижается, поскольку они оптимизируются под тот или иной интерфейс. Но сначала необходимо определить, какие особенности смартфонов должны учитываться веб-серверами.

Области просмотра

Когда пиксель не является пикселем? В том случае, если речь идет о смартфоне. Обычно браузеры смартфонов имитируют браузеры настольных компьютеров с высоким разрешением, поэтому страницы отображаются в них, как на экране монитора. Вот почему появился «режим обзора» с мелким текстом, который невозможно прочитать без увеличения. Ширина области просмотра по умолчанию в стандартных браузерах Android составляет 800 пикселей, а в браузерах iOS – 980 пикселей, независимо от фактического количества физических пикселей на экране.

Чтобы переключить браузер в более удобный для чтения режим, необходимо использовать метаэлемент viewport:

Существует множество вариантов разрешения экранов мобильных устройств, но стандартное значение device-width, сообщаемое браузерами, обычно составляет около 320 пикселей. Если ширина экрана вашего мобильного устройства равна 640 физическим пикселям, изображение шириной 320 пикселей будет масштабировано на всю ширину экрана, и в обработке будет использоваться в два раза больше пикселей. Таким образом, вдвое большая плотность пикселей обеспечивает более четкое отображение на небольшом экране по сравнению с экраном настольного компьютера.

Важно, что если в качестве значения элемента width в метатеге viewport указывается device-width, это значение обновляется, если пользователь меняет ориентацию экрана смартфона или планшета. В сочетании с медиа-запросами эта функция позволяет изменять макет страницы при повороте устройства:

@media screen and (min-width:480px) and (max-width:800px) { /* Target landscape smartphones, portrait tablets, narrow desktops */ } @media screen and (max-width:479px) { /* Target portrait smartphones */ }
В зависимости от того, как функционирует и выглядит ваш сайт на экранах различных устройств, может потребоваться использовать разные контрольные точки. Вы можете также использовать медиа-запрос для выбора определенной ориентации без учета соотношения размеров в пикселях, если эта функция поддерживается .

@media all and (orientation: landscape) { /* Target device in landscape mode */ } @media all and (orientation: portrait) { /* Target device in portrait mode */ }

Изменяется расположение контента и масштаб изображений –

Пример использования медиа-запросов

Недавно мы запустили новую версию страницы О Google . Чтобы пользователям устройств с небольшими экранами, такими как планшеты и смартфоны, было удобнее работать с этой страницей, кроме резинового макета мы добавили в ее код несколько медиа-запросов.

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

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

@media screen and (max-width: 800px) { /* specific CSS */ }
Последний медиа-запрос предназначен для смартфонов:

@media screen and (max-width: 479px) { /* specific CSS */ }
С этого момента прекращается загрузка больших изображений; блоки контента размещаются один над другим. Мы также добавили дополнительные пробелы между элементами контента, чтобы более четко разграничить разделы.

Эти простые приемы позволили оптимизировать сайт для просмотра на самых разных типах устройств.

Изменяется расположение контента, удалено большое изображение – О Google

Заключение

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

Это интересно: