Адаптивный дизайн на основе медиа-запросов. Использование медиа-запросов Медиа запросы разрешение экрана css
Сейчас в нашу жизнь вошло столько устройств, которые позволяют свободно бороздить интернет, что уже не отвечают веениям времени еще недавно преобладающие методы верстки сайтов. Так-как сейчас все больше как маленьких экранов мобильных смартфонов, так и больших экранов десктопов. Я как-то об этом не задумывался и как обычно делал свои сайты под экраны 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.
Итак, в этом материале мы затронем весьма интересную тему создания адаптивных HTML страниц путём использования CSS медиа запросов.
Что вообще такое эти медиа запросы CSS? Эти самые запросы представляют собой обрамлённые коды в определённом синтаксисе, которые применяются только если экран пользователя соответствует условию запроса.
Вот пример запроса:
@media screen and (max-width: 600px) {
body {
background: #ccc;
}
/*Ваш код CSS*/
}
Из премера ясно что код будет применяться если экран видимая область для сайта (viewport) конечного пользователя меньше или равен 600 пикселям по ширине.
Внутри такого запроса может быть сколько угодно элементов к которым применяется сколько угодно свойств и все они будут задействованы только когда выполняется условие медиа запроса. Эта система напоминает своим принципом стандартный оператор if(){}, который имеется у большинства языков программирования. Как и в случае с if, медиа запросы могут иметь сразу несколько условий для выполнения вложенного CSS кода. Например:
@media screen and (min-width: 600px) and (max-width: 1000px) {
body {
background: #ccc;
}
/*Ваш код CSS*/
}
Сразу видно что выполняться будет если ширина вьюпорта от 600 до 1000 пикселей.
Как вы уже понились зам запрос строиться так:
@media screen and (УСЛОВИЕ){
/*Код*/
}
Вы наверное обратили внимание на слово screen. Это значит что-то вроде типа устройства куда идёт вывод. Ещё, кроме screen есть: all, projection, tv, print, 3d-glasses. Для мониторов, мобилок это screen , поэтому с ним у нас и все примеры. Вообще вместо него лучше ставить all (для всего), если вы не уверены с какого вентилятора пользователь откроет ваше приложение или игру или что там у вас.
Писать запросы вы можете как в css файлах, так и в самих HTML страницах. Более того вы можете в HTML вы можете создать медиа запросом условие при котором будет подключен файл:
Это файл который подключиться если плотность пикселей составит 2. Применяется в основном для идентификации четвёртого айфона.
Таким самым образом можно отдельно написать CSS файлы для портретной или ландшафтной ориентации:
Это применяется многими веб-девелоперами.
С этим разобрались. Давайте теперь посмотрим какие запросы вообще могут применяться и работать в современных браузерах.
CSS Медиа запросы
Теперь мы посмотрим какие медиа запросы CSS ипользуются чаще всего и возможно вам пригодятся.
Список свойств будет написан с выдуманными параметрами чтобы вы понимали какие значения может содержать то или иное свойство:
min-width:100px - Минимальная ширина окна
max-width:35em - Максимальная ширина окна
max-device-width: 480px - Максимальная ширина устройства (в пикселях)
device-width: 768px - Ширина устройства
device-aspect-ratio: 9/16 - Соотношение сторон
orientation:landscape - Ландшафтная ориентация
orientation:portrait - Портретная ориентация
resolution: 96dpi - Плотность экрана
min-resolution: 192dpi - Минимальная плотность экрана
-webkit-device-pixel-ratio: .75 - Коэффициент плотности экрана (в примере значение 0.75)
-webkit-min-device-pixel-ratio: 1.3 Минимальный коэффициент плотности экрана
О последних параметрах хочется немного поговорить. Добавлю что resolution нестабильно работает. Некоторые устройства не принимают должным образом запрос. А вот -webkit-device-pixel-ratio это собственно условный коэффициент плотности экрана 0.75 это экран с низкой плотностью пикселей, а 2 это Retina.
P.S. Если вы хотите быстро проверить какие 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 ). Значение считается устаревшим. |
| Предназначен для печатных страниц и для режима предварительного просмотра печати. | |
| 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 разметка примера:
Рапаны
Рапаны (лат. Rapana) - род хищных брюхоногих моллюсков из семейства Muricidae. Распространены в морях Тихого и Индийского океанов. С 1947 года встречается в Черном море. Длина раковины до 12-15 см. Раковина широкоовальной формы, завиток низкий, последний оборот вздут, серовато-коричневого цвета со спиральными рёбрами и осевыми утолщениями. Активные хищники, питающиеся двустворчатыми мелкими моллюсками, например, мидиями и устрицами, раковины которых они открывают при помощи своей сильной мускульной ноги. Молодые рапаны с помощью своего покрытого зубчиками языка-сверла делают отверстия в раковинах своих жертв и раскрывают их. Обитают на любых типах дна, передвигаясь с помощью мускулистой ноги.
Ниже показано как этот пример отображается в браузере, а на изображении как страница отображается в предварительном просмотре печати страницы (стили, которые мы установили для печати).
Медиазапросы используются в тех случаях, когда нужно применить разные 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.
Медиа-запросы — это функция CSS, которая позволяет содержимому веб-страницы адаптироваться к разным и разрешениям. Они являются неотъемлемой частью гибкого веб-дизайна и используются для настройки внешнего вида веб-сайтов для нескольких устройств с различным размером экрана. Так, Media Queries — это модуль CSS3, позволяющий преобразовывать контент в такие условия, как разрешение экрана смартфона или компьютера. Стал рекомендованным W3C стандартом в июне 2012 года и активно применяется сегодня в веб-разработке и графическом дизайне.
Многие функции мультимедиа — это функции диапазона, что означает, что они могут иметь префикс «min-» или «max-» для выражения ограничений минимального или максимального условия. Например, эта команда будет применять стили только в том случае, если ширина видового экрана браузера равна или меньше 12,450px: @media (max-width: 12450px) {...}.
Если вы создаете запрос функции мультимедиа без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном: @media (цвет) {...}.
Если функция не применяется к устройству, на котором работает браузер, выражения, содержащие эту функцию мультимедиа, всегда являются ложными. Например, стили, вложенные в следующий запрос, никогда не будут использоваться, потому что ни одно речевое устройство не имеет формата экрана: @media speech и (соотношение сторон: 11/5) {...}.
Техническая спецификация
Медиа-запросы — это ключевой компонент адаптивного дизайна, который позволяет адаптировать CSS на основе различных параметров или характеристик устройства. Например, мультимедийный запрос может применять разные стили, если экран меньше определенного размера, или на основе того, удерживает ли пользователь свое устройство в портретном или альбомном режиме.
Синтаксис запросов к мультимедиа также используется в других контекстах, например, в медиа-атрибуте элемента Метод Window.matchMedia ()
может использоваться для проверки окна на запросе в медиа. Вы также можете применить функцию MediaQueryList.addListener ()
для уведомления при изменении состояния запросов. С помощью этой функции ваш сайт или приложение смогут реагировать на изменения конфигурации устройства, ориентации или состояния. Адаптивный веб-дизайн столкнулся с медленной загрузкой содержимого. Сейчас процесс по устранению этого недостатка хорошо документирован. Есть несколько способов, которые разработчики используют для лучшей загрузки контента и изображений на разных устройствах. Один из них — использование медиа-запросов, которые работают для вызова стилей пользовательского устройства на основе его размеров. В прошлом программисты спорили о том, являются ли медийные запросы наилучшим решением в случае с мобильными устройствами, и эти дебаты по-прежнему продолжаются. Сейчас официально признано, что CSS медиа-запросы (media queries) — это простой и эффективный способ обслуживания различного контента для ряда устройств, и наиболее часто используемые запросы — это те, которые касаются высоты и ширины окна просмотра. CSS-стили для медиа-запросов сначала проверяют тип медиафайлов на строку пользовательского агента, прежде чем переходить к проверке физических атрибутов окна просмотра. Они являются объявлением CSS, которое можно вызвать с помощью внешней таблицы стилей. Внешний вызов будет выглядеть так: <link rel = "stylesheet" media = "и (min-width: 320px) и (max-width: 480px)" href = "css/yourstylesheet.css" />
. Прямой же вызов CSS будет выглядеть так: @media screen and (min-width:320px)
and (max-width:480px){
/*Insert your styles here
Медиа-запросы CSS не являются модульными, а значит, это может затруднить их работу. Запрос элемента похож на медийный запрос, потому что он использует CSS при выполнении определенных условий. Однако эти виды данных основаны на элементах, а не на браузере, которые в настоящее время не поддерживаются в CSS3. Элементные запросы набирают обороты, тем более что они дополняют медиа-запросы CSS. Это означает, что оба могут в конечном итоге работать вместе, чтобы создавать более модульные и гибкие конструкции. Масштабирование изображений для гибкого дизайна — достаточно простой процесс. Тем не менее, есть несколько проблем, на которые нужно обратить внимание. Речь идет о потере деталей и изображений при сжатии для размещения контента страницы на более мелких устройствах. Чтобы создать масштабируемые изображения, просто добавьте следующий код в таблицу стилей: max-width: 100%;
Это уменьшит изображение, чтобы оно соответствовало размеру контейнера, который меньше ширины картинки. Установка максимальной ширины на 100% означает, что изображение не будет увеличиваться больше, чем его фактический размер. Однако это может быть проблемой, когда дело доходит до производительности сайта, потому что вы по существу доставляете полноразмерный образ на каждое устройство. Для этого нет простого решения, особенно если вы работаете на сайте с устаревшими изображениями. Однако Adaptive Images — это плагин, который может оптимизировать ваши изображения на основе размеров экрана. Адаптивный дизайн на основе медиа-запросов Framework Foundation также позволяет обмениваться изображениями на основе размеров экрана. При работе с изображениями необходимо использовать SVG, веб-шрифты, веб-тип и CSS.Запросы мультимедиа для вызова стилей
Вызов с использованием внешней таблицы стилей
Работа с изображениями