Свойство media-zaprosy

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

Диабаз, формируя аномальные геохимические ряды, сменяет известняк, образуя на границе с Западно-Карельским поднятием своеобразную систему грабенов.

grid

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

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

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

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

HTML5CSS3IECrOpSaFx

Привет! Как дела? Как сажа бела?

height (min-height, max-height)

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

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

monochrome (min-monochrome, max-monochrome)

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

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

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

@media print and (monochrome) { body { font-family: Times, 'Times New Roman', serif; } h1, h2, p { color: black; }
}
@media print and (color) { body { font-family: Arial, Verdana, sans-serif; }

h1, h2, p { color: #556b2f; }
}

orientation

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

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

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

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

@media screen and (orientation: landscape) { #logo { background: url(logo1.png) no-repeat; }
}
@media screen and (orientation: portrait) { #logo { background: url(logo2.png) no-repeat; }
}

resolution (min-resolution, max-resolution)

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

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

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

@media print and (min-resolution: 300dpi) { …
}

scan

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

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

width (min-width, max-width)

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

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

Пример 9. Использование max-width

HTML5CSS3IECrOpSaFx

Пока магма остается в камере, мусковит сингонально поднимает шток, в то время как значения максимумов изменяются в широких пределах.<\p>

Источник: http://htmlbook.ru/css/value/media

CSS — Медиа запросы (media queries)

Статья, в которой познакомимся с медиа запросами и научимся применять их для создания адаптивных сайтов. Рассмотрим основные конструкции media запросов для использования их в вёрстке страниц с использованием фреймворков Bootstrap 3 и Bootstrap 4.

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

Медиа запросы (media queries) — это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Иными словами, это конструкции, которые позволяют определять на основании некоторых условий какие стили необходимо использовать на веб-странице, а какие нет.

Медиа запросы появились в спецификации CSS3 и на сегодняшний день поддерживаются во всех современных браузерах (Chrome 4+, Firefox 3.5+, IE 9+, Opera 9+, Safari 4+).

Поддержка браузерами CSS3 медиа запросов (media queries)

Медиа запросы предназначены для создания адаптивных дизайнов сайтов. Адаптивный дизайн отличается от других тем, что он может «приспосабливаться» (видоизменяться) в зависимости от того, какую ширину экрана имеет устройство (браузер). Более подробно познакомиться с адаптивным дизайном можно в статье «Что такое адаптивная разметка».

Но при создании адаптивных веб-страниц также необходимо обратить внимание на метатег viewport.

Обратите внимание

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

Иными словами, он устанавливает соответствие между CSS и физическим разрешением веб-страницы. Более подробно разобраться, как работает метатег viewport можно в статье «Знакомство с meta viewport».

Подключение метатега viewport к странице в большинстве случаях осуществляется так:

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

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

@media условие { /* стили (они будут выполняться, если устройство соответствует указанному условию) }

Основные типы устройств:

  • all — все устройства (по умолчанию).
  • print — принтеры и режим предварительного просмотра страницы перед печатью.
  • screen — устройства с дисплеями.

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

  • and — требует обязательного выполнения всех указанных условий.Например:@media screen and (min-width: 1200px) and (orientation: landscape) { /* Стили CSS … */ }Стили CSS в вышеприведённом примере выполняться только в том случае, если страница будет выводиться на устройство с экраном, иметь область просмотра более 1200 пикселей в ширину, а также находиться в альбомном режиме.
  • , (запятая) — требует обязательного выполнения хотя бы одного из указанных условий в медиа запросе.@media (min-width: 544px), (orientation: landscape) { /* Стили CSS … */ }Стили CSS в этом примере будут применяться к странице в двух случаях. Т.е. тогда, когда устройство будет иметь viewport не менее 544 пикселей (включительно) или ориентацию landscape.
  • not — предназначен для отрицания указанного условия. Имеет по отношению к оператору and меньший приоритет, т.е. оператор not всегда выполняется после and.@media not screen and (orientation: portrait), (min-width: 992px) { /* Стили CSS … */ }Стили CSS, находящиеся в этом правиле, будут применены к странице только в том случае, если устройство не является screen и не будет иметь портретную ориентацию. А также они (стили CSS) будут применены к элементам документа ещё тогда, когда устройство (браузер) будет иметь ширину рабочей области не менее 992 пикселя (включительно).Т.е. запрос в вышеприведённом примере будет обрабатываться так:@media not (screen and (orientation: portrait)), (min-width: 992px) { /* Стили CSS … */ }

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

Для составления условия в @media можно использовать следующие фукнции:

  • width — указывает требования к ширине области просмотра устройства (браузера). /* применить стили CSS только для устройств с шириной области просмотра, равной 320px */ @media (width: 320px) { /* Стили CSS … */ }
  • min-width — задаёт минимальную ширину области viewport в px, em или других единицах. /* для устройств (браузеров), которые предоставляют для страницы минимальную ширину области просмотра, равную 544 пикселя */ @media (min-width: 544px) { /* Стили CSS … */ }
  • max-width — указывает на то, какой должна быть максимальная рабочая область устройства (браузера). /* стили, которые будут применены к элементам страницы с рабочей областью не больше 1199 пикселей */ @media (max-width: 1199px) { /* Стили CSS … */ }
  • height, min-height и max-height — задают требования аналогично вышеприведённым функциям, но в отношении высоты viewport. /* стили, которые будут применены к элементам страницы в том случае, если viewport браузера будет больше 720px в высоту */ @media (min-height: 720px) { /* Стили CSS … */ }
  • orientation — функция, которая проверяет то, в каком режиме (portrait или landscape) отображается страница.Пример, в котором в зависимости от ориентации экрана, отображается одна или другая картинка: /* landscape (альбомный) — это режим, в котором наоборот ширина viewport больше её высоты */ @media (orientation: landscape) { #background-image { background: url(image1.png) no-repeat; } } /* portrait (портретный) — это режим, в котором высота viewport больше ширины */ @media (orientation: portrait) { #background-image { background: url(image2.png) no-repeat; } }
  • aspect-ratio (min-aspect-ratio, max-aspect-ratio) — позволяют указать то, как ширина устройства должна относиться к высоте. В качестве значений допускается использовать только целые значения. /* для дисплеев с соотношением сторон 16/9 */ @media screen and (device-aspect-ratio: 16/9) { /* Стили CSS … */ } /* для дисплеев с соотношением сторон 1336/768 */ @media screen and (device-aspect-ratio: 1336/768) { /* Стили CSS … */ }
  • resolution (min-resolution, max-resolution) — указывает разрешение (плотность пикселей) устройства вывода. В качестве единиц измерения разрешения используются следующие величины: dpi (количество точек на дюйм), dpcm (количество точек на сантиметр), dppx (количество точек на пиксель). /* для экранов, имеющих высокую плотность пикселей (т.е. для таких, у которых отношение аппаратных пикселей к CSS не менее 2) */ @media screen and (min-resolution: 2dppx) { /* Стили CSS … */ } /* при печати с разрешением свыше 300 точек на дюйм */ @media print and (min-resolution: 300dpi) { /* Стили CSS … */ }

Использование медиа-запросов при подключении файлов CSS

Медиа запросы также можно применять в качестве значения атрибута media элемента link. Это позволит в зависимости от параметров устройства определить, какие файлы CSS необходимо подсоединить к странице, а какие нет. Обычно данный функционал используется тогда, когда к разным классам устройств необходимо применить различные стили CSS.

Кроме этого медиа запросы можно также использовать в правиле @import, которое предназначено для импортирования стилей из других файлов CSS в текущий.

/* импортирование стилей из файла styles-xs.css в текущий файл стилей только для устройств, которые предоставляют веб-странице viewport, имеющий ширину 543 пикселя или меньше. */ @import url(styles-xs.css) (max-width: 543px);

Медиа запросы для Bootstrap 3

Организация media queries в порядке возрастания классов устройств xs, sm, md и lg (по умолчанию):

/* Устройства с очень маленьким экраном (смартфоны, меньше 768px) */ /* Стили CSS (по умолчанию) — для ширины viewport

Вышеприведённые запросы необходимо использовать только в указанном порядке.

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

@media (max-width: 767px) { /* стили для xs-устройств */ } @media (min-width: 768px) and (max-width: 991px) { /* стили для sm-устройств */ } @media (min-width: 991px) and (max-width: 1199px) { /* стили для md-устройств */ } @media (min-width: 1200px) { /* стили для lg-устройств */ }

Медиа запросы для Bootstrap 4

Синтаксис медиа-запросов для Bootstrap 4, которые можно использовать только в следующем порядке (последовательного увеличения минимальной ширины viewport):

/* xs — устройства (до 576px) */ /* CSS для ширины, которая меньше 575px (включительно) */ /* sm-устройства (больше или равно 576px) */ @media (min-width: 576px) { /* CSS для: 576px

Список media запросов для фреймворка Bootstrap 4, которые можно применять только в обратном порядке (в порядке убывания ширины области просмотра окна браузера):

/* xl-размер (>=1200px) */ /* CSS для >=1200px */ /* lg-размер (

Источник: https://itchief.ru/lessons/html-and-css/css-media-queries

CSS: Правило @media

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

Синтаксис

@media тип_устройства and|not|only (медиа_особенности) { CSS код; }

Также можно включать различные стили для различных устройств вывода информации с помощью атрибута media тега link:

Типы устройств

ТипОписание
all Используется для всех типов устройств.
aural Используется для синтезаторов речи и звука.
braille Используется для тактильной обратной связи устройств Брайля.
embossed Используется для принтеров Брайля.
handheld Используется для небольших или портативных устройств.
print Используется для принтеров
projection Используется для презентаций, таких как слайды.
screen Используется для экранов компьютеров, планшетов, смартфонов и т.д.
speech Используется для речевых браузеров.
tty Используется для носителей, использующих сетки с фиксированным шагом символов, такие как телетайпы и терминалы.
tv Используется для телеэкранов.

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

Поэтому тип носителя обычно используется для различения экранных версий документа от печатных, что позволяет совершенно по разному их оформлять:

Читайте также:  Что такое rotapost

/* только для печати */ @media print { /* скрыть меню */ #navigation { display: none; } /* начинать каждую новую страницу с заголовка h1 */ h1 { page-break-before: always; } }

Особенности устройств для медиа запросов

ОсобенностьОписание
aspect-ratio Определяет соотношение ширины и высоты области просмотра. Значение состоит из двух положительных чисел, разделенных прямой косой чертой (слэшем). Первое число представляет собой количество пикселей по горизонтали, второе по вертикали. Может иметь префикс «min» или «max».
color Определяет количество бит на цвет для устройства. Может иметь префикс «min» или «max».
color-index Указывает количество цветов, которое устройство может отображать. Может иметь префикс «min» или «max».
device-aspect-ratio Определяет соотношение ширины и высоты устройства вывода. Значение состоит из двух положительных чисел, разделенных прямой косой чертой (слэшем). Первое число представляет собой количество пикселей по горизонтали, второе по вертикали. Может иметь префикс «min» или «max».
device-height Указывает высоту устройства, такого как экран компьютера (имеется в виду весь экран или страницу, а не только область просмотра). Может иметь префикс «min» или «max».
device-width Указывает ширину устройства, такого как экран компьютера (имеется в виду весь экран или страницу, а не только область просмотра). Может иметь префикс «min» или «max».
grid Определяет как устроен вывод у устройства: на основе сетки или точечный. Если устройство на основе сетки (например, терминал, телетайп или дисплей телефона, поддерживающий только один шрифт), то значение 1, в противном случае значением будет 0.
height Указывает высоту области просмотра, например, окно браузера. Может иметь префикс «min» или «max».
monochrome Указывает количесвто бит на пиксель для устройств с монохромными экранами. Может иметь префикс «min» или «max».
orientation Указывает в каком режиме просмотра находится дисплей: ландшафтном (ширина дисплея больше, чем высота) или портретном (высота дисплея больше, чем ширина).
resolution Указывает разрешение (плотность пикселей) устройства вывода. Может быть указана в dpi (точек на дюйм) или в dpcm (точек на сантиметр). Может иметь префикс «min» или «max».
scan Определяет процесс сканирования телевизионных устройств вывода.
width Указывает ширину области просмотра, например, окно браузера. Может иметь префикс «min» или «max».

Наиболее важными из особенностей устройств для медиа запросов являются min-width и max-width, позволяющие создавать гибкие конструкции, в которых изменение макета сайта происходит на основе области просмотра браузера, установленного на устройстве.

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

@media screen and (min-width: 600px) {}

Медиа запросы не чувствительны к регистру, но скобки вокруг условия являются обязательной частью синтаксиса запроса. Оператор and здесь используется для объединения типа устройства с условием, но он также может объединять несколько особенностей устройства вместе:

@media (max-width: 500px) and (min-aspect-ratio: 1/1) {}

Этот медиа запрос имеет значение true, если устройство для просмотра имеет максимальное разрешение области просмотра 500px и соотношение сторон 1:1 (квадрат или ландшафтный просмотр). Обратите внимание, что в этом запросе нет типа устройства, поэтому это правило будет применяться ко всем типам устройств.

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

В дополнение к логическому оператору and (и), медиа запросы могут включать в себя логическое not (не), only (только) и or (или). Запятая (,) используется в качестве оператора or, то есть каждый запрос рассматривается индивидуально. Это означает, что с помощью запросов, разделенных запятой, можно одно правило @media ориентировать на различные типы устройств и их особенности.

Следующее правило @media применяется либо к устройству с минимальной областью просмотра 700px в ширину, либо если устройство находится в ландшафтном режиме просмотра:

@media (min-width: 700px), (orientation: landscape) {}

Оператор not используется для отрицания условий медиа запроса. Соответствующие стили применяются, если устройство не соответствует указанным вслед за not параметрам. Например следующее правило применяется только в том случае, если экран устройства не 800px в ширину:

@media not screen and (device-width: 800px) {}

Оператор only применяется, когда нужно скрыть правило @media от старых браузеров, которые не поддерживают описываемый синтаксис. Браузеры, которые поддерживают медиа запросы, оператор only просто проигнорируют.

/* Не работает в старых браузерах */ @media only screen and (min-width: 600px) {}

Источник: https://puzzleweb.ru/css/20_css_media.php

Медиа-запросы в адаптивном дизайне 2018

В июле 2010 года я написала статью «Как использовать CSS3 медиа-запросы для создания мобильной версии вашего сайта» для журнала Smashing. Спустя почти восемь лет эта статья по-прежнему очень популярна.

Я решила вернуться к этой теме, поскольку теперь у нас есть такие методы компоновки, как Flexbox и CSS Grid.

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

Нужны ли вообще медиа-запросы?

Первое, что нужно сделать перед тем как написать медиа-запрос в 2018 году — спросить себя, нужно ли вообще его использовать. При построении сеток с использованием float мы создаем гибкую сетку, вычисляя размер наших колонок используя проценты. Эти проценты вычисляются методом Этана Маркотт (Ethan Marcotte), описанным в статье Fluid Grids.

Этот метод лег в основу техники, которую мы теперь знаем как «отзывчивый дизайн». Чтобы изменить размер или пропорции колонок, мы должны добавить контрольную точку используя медиа-запрос и переопределить их. В работе с процентами других возможностей нет — колонки всегда будут равны проценту от контейнера, в котором они находятся, будь то широкий или узкий контейнер.

Flexbox, CSS Grid и многоколоночная верстка (Multi-column layout) адаптивны по умолчанию, так как их спецификации были написаны в мире, где адаптивный дизайн и кросс-девайсность уже стали реальностью. Это значит, что они уже включают в себя множество функций, которые позволяют легко создавать адаптивные сетки.

В этом CodePen приведены примеры того, как Multi-column, Flexbox и Grid меняют размеры и положение в соответствии с доступным пространством. Здесь нет медиа-запросов и совсем немного CSS.

Важно

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

Этого можно достичь с помощью всего нескольких строк CSS.

Допустим flex-basis для наших элементов составляет 250px. Если нет места для двух 250px колонок, они будут выстраиваться в колонку, а если задать положительный flex-grow они еще будут заполнять все доступное пространство.

.media { display: flex; flex-wrap: wrap;
} .media > * { flex: 1 1 250px;
}

Когда есть достаточно места для отображения двух колонок
Контент в одну колонку Одна из особенностей использования Flexbox в том, что доступное пространство для блока ограничено или размером экрана или контейнером с меньшим доступным пространством. Медиа-запросы не могут решить эту задачу, поскольку они смотрят только на доступные размеры всего экрана. Таким образом, новые способы компоновки контента позволяют нам реализовать то, что не могут медиа-запросы. В примере ниже показано, как контент может быть ограничен вьюпортом (измените размер окна, чтобы увидеть гибкость) и контейнером. Только в том случае, если такого поведения сеток вам недостаточно, стоит задуматься о применении медиа-запросов. В связке медиа-запросов и CSS Grid вы можете полностью переопределить сетку. Медиа-запросы и CSS Grid отлично дополняют друг друга. Всего одной строкой CSS мы можем переопределить, как и где элементы будут расположены в сетке без изменения разметки. Начнем с одноколоночной сетки для узкой ширины.grid { display: grid; grid-gap: 1em; grid-template-columns: 1fr;
}
Для более широкой сетки я использую медиа запрос для переопределения количества колонок и задаю свойство, чтобы некоторые блоки охватили несколько соседних ячеек.@media (min-width: 40em) { .grid { grid-template-columns: 2fr 1fr; } header, footer { grid-column: 1 / 3; }
}
Сочетание уместно примененных медиа-запросов и новых методов компоновки предоставляет нам множество возможностей для достижения наилучшего UX на любом устройстве. В этом CodePen я объединила сетку выше с чуть ранее созданным медиа-объектом. Как вы видите, для контента вполне достаточно места на десктопе, но когда доступная область для содержимого становится слишком узкой, сетка преобразуется медиа-запросом, а блоки встают в одну колонку без медиа-запроса.

Медиа-запросы — лучшие практики

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

НЕ ОРИЕНТИРУЙТЕСЬ НА УСТРОЙСТВА, ДОБАВЬТЕ КОНТРОЛЬНЫЕ ТОЧКИ КОГДА СЧИТАЕТЕ, ЧТО СЕТКУ НАДО ПЕРЕСТРОИТЬ

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

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

Заметили, что стало некомфортно читать? Именно в этот момент, на этой ширине можно добавить медиа-запрос и написать несколько дополнительных CSS свойств.

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

СУЩЕСТВУЮТ НЕ ТОЛЬКО ПИКСЕЛИ

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

БУДЬТЕ ОСОБЕННО ОСТОРОЖНЫ МЕНЯЯ ПОРЯДОК FLEX И CSS GRID ЭЛЕМЕНТОВ

Дразнящая возможность CSS Grid и, в меньшей степени Flexbox — возможность изменить порядок элементов на разных контрольных точках. Этот функционал может обеспечить отличный UX для пользователей, пользующихся клавиатурой и мышью. Но для пользователей, которые используют свой палец для управления, это может создать значительные неудобства.

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

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

Примечание. Для получения дополнительной информации прочитайте статью «Flexbox & the keyboard navigation disconnect».

НЕ ЗАБУДЬТЕ ПРО ВЕРТИКАЛЬНЫЕ МЕДИА-ЗАПРОСЫ

Большинство разработчиков ассоциируют медиа-запросы с шириной устройств. Главное — обеспечить достаточно горизонтального пространства для отображения нескольких столбцов контента. Но медиа-запросы можно использовать и для проверки доступной высоты.

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

В приведенном ниже CSS, многоколоночная сетка будет перестраиваться только в том случае, если достаточно места для двух колонок по 15em. Я добавила медиа-запрос с min-height, чтобы проверять, когда достаточно высоты чтобы чем начинать выстраивать колонки.

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

@media (min-height: 500px) { section { column-width: 15em; }
}

Медиа-запросы Level 4: Что ожидать?

Медиа-запросы, которые мы используем для создания адаптивного дизайна пришли к нам из спецификации CSS Level 3. Новая спецификация медиа-запросов Level 4 разрабатывается рабочей группой CSS. Эта спецификация добавит новый функционал, и произойдут некоторые изменения в синтаксисе.

Читайте также:  Как стать профессиональным копирайтером

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

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

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

Размер экрана — довольно грубый способ определить, каким устройством пользуется пользователь и как взаимодействует с ним. Современные экранные устройства — невероятно мощные мини-компьютеры. Пользователь может работать на своем телефоне с помощью внешней клавиатуры и мыши даже с небольшим размером экрана; вполне способен нажимать на маленькие элементы интерфейса.

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

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

Теперь мы можем определить может ли пользователь наводить на элементы, а так же тип его указателя, будь то палец или мышь. Свойства pointer и hover помогут улучшить UX для разных типов пользователей и собирать более точные статистики. Приведенные ниже примеры будут работать в текущих версиях Chrome, Safari и Edge.

Вы можете проверить, Can I Use для полного списка поддержки браузерами.

Источник: https://habr.com/post/349484/

Медиа-запросы: Обзор различных возможностей

От автора: Если вам приходилось работать над созданием отзывчивого дизайна, то, наверняка, вы использовали медиа-запросы. Медиа-запросы – это понятный и простой способ для создания отзывчивых сайтов с помощью CSS. Они позволяют вам изменять оформление страницы при определенном размере экрана пользователя.

Вот простой пример:

@media (max-width: 700px) {

Демо-пример

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В результате применения данного медиа-запроса текст абзаца будет становиться красным, если ширина экрана будет равна 700px и меньше.

Если вы хотите, чтобы текст становился красным, если ширина экрана будет больше 700px, тогда нужно будет использовать, наоборот, «min-width».

Вы также можете создать два отдельных запроса, используя «max-width» и «min-width». Вот как это будет выглядеть:

@media (max-width: 700px) and (min-width: 500px) {

Демо-пример

Прекрасно! Теперь текст будет становиться красным только при условии, что ширина экрана будет находиться в диапазоне между 500px и 700px (включительно).

А что если вы хотите применить какие-нибудь стили, если ширина экрана будет меньше 500px или больше 700px? Вы можете это сделать, разделив запросы запятой вот так:

@media (max-width: 500px), (min-width: 700px) {

Демо-пример

Обратите внимание, что в демо-примере текст не становится красным, если ширина окна находится в диапазоне между 500px и 700px (не включительно). Медиа-запросы также можно указывать различными способами. Прямо в HTML-документе:

Вдобавок к этому, можно использовать правило @import в CSS-файле:

@import url(example.css) (max-width: 700px);@media (max-width: 700px) {    /* Здесь прописывается CSS-правила */

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

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

Ширина и высота

Мы можем использовать параметр высоты точно также как и параметр ширины в предыдущих примерах. Например, используя вышеприведенный метод, мы можем сделать цвет фона желтым, если высота окна браузера будет 600px или меньше:

@media (max-height: 600px) {

Демо-пример

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

@media (max-device-height: 600px) {

Ориентация

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

@media screen and (orientation: landscape) {

В данном примере к элементу menu применяется свойство float: left, если у устройства будет активным альбомный режим. Тоже самое можно прописать и для портретного режима:

@media screen and (orientation: portrait) {

Чтобы узнать больше об использовании параметра orientation, прочтите данную статью.

Цвет

Существует много различных способов для использования параметра цвета. Первый способ – это проверить поддерживает ли устройство различные цвета, используя для этого медиа-функцию (color). Если мы хотим задать стили только для черно-белых устройств, мы можем прописать примерно следующее:

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

Следующий способ использования параметра цвета заключается в определении устройств с минимальным (максимальным) числом бит на канал цвета. Предположим, что мы хотим убрать фоновое изображение, если устройство поддерживает 4-битный цвет или еще меньше. Тогда медиа-запрос будет выглядеть так:

Мы также можем применять стили в зависимости от того, используются или нет устройством индексированные цвета. Чтобы применить стили для такого устройства, нужно прописать следующее:

@media all and (color-index) {        background-image: url(wood-texture.jpg);

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

@media (max-color-index: 255) {

Одноцветность

Этот параметр применяется для монохромных устройств. Чтобы задать определенные стили для всех устройств такого типа, мы можем использовать медиа-функцию (monochrome).

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

Например, если вы не хотите показывать изображения на устройствах с разрешающей способностью 8 бит на пиксель, используйте следующий код:

@media (max-monochrome: 8) {

Еще одна классная вещь, которую вы можете реализовать с помощью значения monochrome, – это задать разные стили для цветной и черно-белой печати. Для этого необходимо добавить значение print до или после значения monochrome. Вот как это может выглядеть в CSS-файле:

@media (monochrome) and print {@media not (monochrome) and print {

Пропорции

Пропорции экранов у устройств сильно изменились с момента появления смартфонов и планшетов. На старых мониторах привычным соотношением сторон экрана было значение 4:3 и 5:3, но теперь благодаря новым стандартам HD-видео, появились дисплеи с пропорциями 16:9 и 16:10.

Есть два способа использовать параметр пропорций. Вы можете использовать пропорции окна браузера (с помощью aspect-ratio) или пропорции экрана самого устройства (с помощью device-aspect-ratio).

В следующем примере цвет фона становится желтым, если окно браузера будет квадратным или будет активирован альбомный режим отображения:

@media (min-aspect-ratio: 1/1) {

Демо-пример

А что если вы захотите спрятать какой-то контент от широкоформатных мониторов? Тогда вы можете попробовать следующее:

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {

Демо-пример

В этом примере, абзацы не будут отображаться, если дисплей имеет пропорции 16:9 или 16:10.

Сетка

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

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

Тут есть один момент, о котором следует помнить, – это единица измерения «em». Когда создаются дисплеи для устройств, использующих фиксированный размер пикселей, единица измерения «em» меняет свое значение. Вместо привычного для нас значения оно будет обозначать конкретный размер одной ячейки сетки.

Разрешение

Медиа-функция resolution может быть использована для определения стилей для устройств вывода с определенным значением dpi (точки на CSS «дюйм») или dpcm (точки на CSS «сантиметр»). Например, если бы вам захотелось назначить другой шрифт для экрана с разрешением менее 150dpi, тогда ваш код выглядел бы так:

@media (max-resolution: 150dpi) {        font-family: 'comic sans', cursive;

Единственное, на что следует обратить внимание при использовании медиа-функции resolution, – это печать. Для принтеров значения dpi и dpcm относятся к их разрешающей способности при печати.

Развертка

Параметр scan относится к процессу развертки, которую использует ТВ-устройство. В качестве значения можно указать progressive или interlace. Запрос выглядит следующим образом:

@media tv and (scan: interlace) {

Но данный метод работает только для ТВ-устройств.

Медиа-типы

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

braille – Для устройств системы Брайля для слепых людей. (Пример 1 | Пример 2)

embossed – Для идеи будущего, известной как выпуклые экраны. (Патент | Экспериментирование)

handheld – Для телефонов, карманных компьютеров и других небольших устройств.

print – Для принтеров.

projection – Для мелко- и крупномасштабных проекторов.

screen – Наиболее распространенный тип. Для всех устройств, имеющих экраны.

speech – Для устройств, воспроизводящих речь. (Пример)

tty – Для телекоммуникационных устройств для глухих. (Пример)

tv – Для телевизоров.

Ходили также слухи о том, что медиа-тип 3d-glasses станет валидным, хотя он до сих пор не определен ни в одной из спецификаций W3C. Однако он упомянут в этой спецификации W3C. И если все-таки медиа-тип 3d-glasses будет определен, то его можно будет также использовать в HTML4, поскольку медиа-типы имеют обратную совместимость.

Для дальнейшего чтения

Вот несколько ссылок на ресурсы по данной теме:

Заключение

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

Источник: https://webformyself.com/media-zaprosy-obzor-razlichnyx-vozmozhnostej/

Адаптивная верстка сайтов | Медиа-запросы

Медиа-запросы (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%. Надеюсь, все помнят, что в адаптивной верстке используется принцип «резиновой» разметки, поэтому все размеры в %, а не в пикселях.

Читайте также:  Что такое cpm

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

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

Словосочетание screen and следует читать так: «для всех устройств с цветным экраном И для тех, у кого экран меньше 1000 пикселей».

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

@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, что и остальные правила, но в самом конце. Иногда их выносят в отдельный файл.

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

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

Адаптивная верстка сайтов | Введение Адаптивная верстка сайтов | Медиа-запросы

Адаптивная верстка сайтов | Сначала мобильные

Источник: http://www.websovet.com/adaptivnaya-verstka-sajtov-media-zaprosy

Using media queries

Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

Media queries are used for the following:

Note: The examples on this page use CSS's @media for illustrative purposes, but the basic syntax remains the same for all types of media queries.

Syntax

A media query is composed of an optional media type and any number of media feature expressions. Multiple queries can be combined in various ways by using logical operators. Media queries are case-insensitive.

A media query computes to true when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true. Queries involving unknown media types are always false.

Note: A style sheet with a media query attached to its tag will still download even if the query returns false. Nevertheless, its contents will not apply unless and until the result of the query changes to true.

Media types describe the general category of a device. Except when using the not or only logical operators, the media type is optional and the all type will be implied.

allSuitable for all devices.printIntended for paged material and documents viewed on a screen in print preview mode. (Please see paged media for information about formatting issues that are specific to these formats.)screenIntended primarily for screens.speechIntended for speech synthesizers.Deprecated media types: CSS2.1 and Media Queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in Media Queries 4 and shouldn't be used. The aural type has been replaced by speech, which is similar.

Важно

Media features describe specific characteristics of the user agent, output device, or environment. Media feature expressions test for their presence or value, and are entirely optional. Each media feature expression must be surrounded by parentheses.

NameSummaryNotes
width Width of the viewport
height Height of the viewport
aspect-ratio Width-to-height aspect ratio of the viewport
orientation Orientation of the viewport
resolution Pixel density of the output device
scan Scanning process of the output device
grid Does the device use a grid or bitmap screen?
update How frequently the output device can modify the appearance of content Added in Media Queries Level 4.
overflow-block How does the output device handle content that overflows the viewport along the block axis? Added in Media Queries Level 4.
overflow-inline Can content that overflows the viewport along the inline axis be scrolled? Added in Media Queries Level 4.
color Number of bits per color component of the output device, or zero if the device isn't color
color-gamut Approximate range of colors that are supported by the user agent and output device Added in Media Queries Level 4.
color-index Number of entries in the output device's color lookup table, or zero if the device does not use such a table
display-mode The display mode of the application, as specified in the web app manifest's display member Defined in the Web App Manifest spec.
monochrome Bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome
inverted-colors Is the user agent or underlying OS inverting colors? Added in Media Queries Level 5.
pointer Is the primary input mechanism a pointing device, and if so, how accurate is it? Added in Media Queries Level 4.
hover Does the primary input mechanism allow the user to hover over elements? Added in Media Queries Level 4.
any-pointer Is any available input mechanism a pointing device, and if so, how accurate is it? Added in Media Queries Level 4.
any-hover Does any available input mechanism allow the user to hover over elements? Added in Media Queries Level 4.
light-level Light level of the environment Added in Media Queries Level 5.
prefers-reduced-motion The user prefers less motion on the page Added in Media Queries Level 5.
prefers-reduced-transparency The user prefers reduced transparency Added in Media Queries Level 5.
prefers-contrast Detects if the user has requested the system increase or decrease the amount of contrast between adjacent colors Added in Media Queries Level 5.
prefers-color-scheme Detect if the user prefers a light or dark color scheme Added in Media Queries Level 5.
scripting Detects whether scripting (i.e. JavaScript) is available Added in Media Queries Level 5.
device-width Width of the rendering surface of the output device Deprecated in Media Queries Level 4.
device-height Height of the rendering surface of the output device Deprecated in Media Queries Level 4.
device-aspect-ratio Width-to-height aspect ratio of the output device Deprecated in Media Queries Level 4.

Logical operators

The logical operators not, and, and only can be used to compose a complex media query. You can also combine multiple media queries into a single rule by separating them with commas.

and

The and operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. It is also used for joining media features with media types.

not

The not operator is used to negate a media query, returning true if the query would otherwise return false. If present in a comma-separated list of queries, it will only negate the specific query to which it is applied. If you use the not operator, you must also specify a media type.

Note: In Level 3, the not keyword can't be used to negate an individual media feature expression, only an entire media query.

only

The only operator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles. If you use the only operator, you must also specify a media type.

, (comma)

Источник: https://developer.mozilla.org/docs/Web/CSS/Media_Queries/Using_media_queries

Ссылка на основную публикацию