Если вы работали с адаптивным дизайном, вы, вероятно, использовали медиа-запросы. Медиа-запросы — это простой и понятный способ создания адаптивных сайтов с использованием CSS. Они работают, позволяя вам изменить стиль страницы, когда экран пользователя имеет определенный размер. Вот простой пример:
@media (max-width: 700px) {
p {
color: red;
}
}Этот медиа-запрос заставляет текст абзаца становиться красным, когда ширина экрана составляет 700 пикселей или меньше. Если вы хотите сделать текст красным, когда размер экрана превышает 700 пикселей, вы должны использовать «минимальную ширину». Вы также можете установить два отдельных запроса, таких как «максимальная ширина» и «минимальная ширина». Вот как это будет выглядеть:
@media (max-width: 700px) and (min-width: 500px) {
p {
color: red;
}
}
Потрясающие! Текст будет только красным, если ширина экрана составляет от 500 до 700 пикселей (включительно).
Теперь, что если вы хотите применить некоторые стили, если ширина экрана меньше 500 пикселей или больше 700 пикселей? Вы можете сделать это, используя запятую для разделения запросов, например так:
@media (max-width: 500px), (min-width: 700px) {
p {
color: red;
}
}
Обратите внимание на демонстрацию, что если окно имеет ширину от 500 до 700 пикселей (не включительно), текст не будет красным.
Медиа-запросы также могут быть написаны разными способами.
Прямо в вашем HTML:
<link rel="stylesheet" media="(max-width: 700px)" href="example.css" />
И в дополнение к методу, который мы использовали выше, вы можете написать их, используя @import
/* @import */
@import url(example.css) (max-width: 700px);
/* @media */
@media (max-width: 700px) {
/* CSS goes here... */
}
Примечание редактора: @importне рекомендуется, но мы просто демонстрируем тот факт, что медиа-запросы могут быть определены таким образом с ним.
Пока что все довольно просто, и вы, возможно, уже многое знали, если не все. Но давайте пойдем немного дальше.
В большинстве случаев медиа-запросы используются для изменения стилей в зависимости от ширины экрана. Хотя ширина является наиболее распространенным приложением, существует целый список других типов запросов, включающих различные медиа-функции.
Ширина и высота
Мы можем использовать высоту так же, как мы использовали ширину в предыдущих примерах. Например, используя тот же метод, что и раньше, мы можем изменить цвет фона на желтый, если высота браузера составляет 600 пикселей или меньше:
@media (max-height: 600px) {
body {
background: yellow;
}
}
Мы также можем поставить префикс высоты и ширины с помощью device- Если мы сделаем это, он будет использовать ширину и высоту всего экрана в качестве значения вместо ширины и высоты окна браузера или области просмотра:
@media (max-device-height: 600px) {
body {
background: red;
}
}
ориентация
Ориентация устройства может быть использована для создания пользовательских макетов. Это может быть полезно для размещения меню и кнопок в местах, которые легко доступны для больших пальцев пользователя. Например, чтобы установить конкретные стили, применяемые к макетам в ландшафтном режиме, вы можете использовать следующее:
@media screen and (orientation: landscape) {
menu {
float: left;
}
}
Этот пример будет применять float: left Вы можете сделать то же самое с портретным режимом:
@media screen and (orientation: portrait) {
menu {
float: right;
}
}
Чтобы узнать больше о функции orientationэтой статьей .
цвет
Функцию цветного носителя можно использовать разными способами. Первый способ — проверить, совместимо ли устройство с цветом, с помощью (color) Если мы хотим использовать только неокрашенные устройства, мы можем использовать что-то похожее на это:
@media not (color) {
body {
background: black;
color: white;
}
}
Приведенный выше код использует ключевое слово not Код, который мы использовали, может быть полезен для удобства чтения текста на черно-белых устройствах.
Еще одна вещь, которую мы можем сделать с цветом — это целевые устройства с минимальным (или максимальным) количеством битов на компонент цвета . Допустим, вы хотите удалить фоновое изображение, если устройство имеет 4-битный цвет или ниже. Вот как это будет выглядеть:
@media (max-color: 4) {
body {
background-image: none;
}
}
Мы также можем применять стили в зависимости от того, использует ли устройство индексированный цвет . Чтобы применить стиль к такому устройству, вы можете сделать это:
@media all and (color-index) {
body {
background-image: url(wood-texture.jpg);
}
}
В этом примере мы используем ключевое слово all
Допустим, вы хотите, чтобы отображалось предупреждение, если индексированное цветовое устройство пользователя имеет менее 256 цветов. Это будет выглядеть примерно так:
@media (max-color-index: 255) {
.alert {
display: block;
}
}
Монохромный
Эта функция применяется к устройствам в градациях серого. Чтобы применить определенные стили ко всем монохромным устройствам, мы можем использовать (monochrome) Мы также можем использовать это значение для придания стиля устройствам с определенным количеством бит на пиксель. Например, если вы хотите удалить изображения на всех устройствах, которые имеют 8 бит на пиксель, мы могли бы использовать этот код:
@media (max-monochrome: 8) {
img {
display: none;
}
}
Одна удивительная вещь, которую мы можем сделать с monochrome Мы делаем это, помещая printmonochrome Вот как может выглядеть наш CSS:
/* Black and White Print */
@media (monochrome) and print {
body {
color: black;
}
}
/* Color Print */
@media not (monochrome) and print {
body {
color: #09f;
}
}
Соотношение сторон
Соотношения сторон сильно изменились с момента появления смартфонов и планшетов. Более старые дисплеи обычно имеют соотношение сторон 4: 3 и 5: 3, но теперь с новыми стандартами HD-видео мы видим дисплеи 16: 9 и 16:10.
Есть два способа использовать соотношение сторон; Вы можете использовать соотношение браузера (используя aspect-ratiodevice-aspect-ratio
Следующий пример сделает фон желтым, если браузер имеет квадратную или горизонтальную ориентацию:
@media (min-aspect-ratio: 1/1) {
body {
background: yellow;
}
}
Что если вы хотите спрятать контент на широкоэкранных мониторах? Вы можете использовать что-то вроде этого:
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {
p {
display: none;
}
}
В этом примере, если дисплей имеет стандартное соотношение сторон 16: 9 или 19:10, элементы абзаца не будут отображаться.
сетка
Функция медиа grid Это может быть приложение терминала, подобное показанному на рисунке, или дисплей старого телефона, в котором используется один шрифт.
В этом примере будут удалены все изображения, если пользователь подключен к сетке:
@media (grid) {
img {
display: none;
}
}
Имейте в виду, что это единица «Эм». При создании дисплея для грид-устройств единица «em» меняет свое значение. Вместо этого единица будет точным размером одной ячейки сетки.
разрешение
Функция resolution Например, если вы хотите установить другой шрифт для экрана с разрешением менее 150 точек на дюйм, ваш код может выглядеть следующим образом:
@media (max-resolution: 150dpi) {
body {
font-family: 'comic sans', cursive;
}
}
При работе с функцией resolution Для принтеров dpi и dpcm соответствуют разрешению экрана.
сканирование
Сканирование относится к процессу сканирования, который используют телевизионные устройства. Значение может быть установлено в progressiveinterlace Запрос может быть настроен так:
@media tv and (scan: interlace) {
video {
display: none;
}
}
Опять же, этот метод работает только на телевизионных устройствах.
Типы СМИ
Типы мультимедиа относятся к различным типам дисплеев, на которые можно настроить стили. Вот список текущих типов:
-
braille( Пример 1 | ( Пример 2 ) -
embossed( Патент | Эксперимент ) -
handheld -
print -
projection -
screenДля использования со всеми экранированными устройствами. -
speech( Пример ). -
tty( Пример ). -
tv
Ходили слухи о том, что тип носителя 3d-glasses Это, однако, упоминается в этой спецификации W3C . Если бы 3d-glasses
Дальнейшее чтение
Вот несколько ссылок для дополнительных исследований в этой области:
- Статья о медиазапросах для начинающих на сайте SitePoint
- Медиа Запросы Уровень 3 спецификация на W3C
- Медиа Запросы Уровень 4 спецификация на W3C
Вывод
Это завершает обзор множества различных опций, нацеленных на конкретные устройства, окна и многое другое. Если вы смогли использовать какие-либо из этих функций медиа-запросов, мы будем рады услышать о вашем опыте в комментариях.
Если вам интересно узнать больше об адаптивном веб-дизайне, ознакомьтесь с нашей новой книгой « Jump Start Responsive Web Design» , написанной Крисом Уордом.