@media
Запрос @media устанавливает стиль в зависимости от типа устройства и размера экрана.
Синтаксис @media:
@media սարքավորման տեսակը and | not | only (media պարամետրերը) {
Css կոդ
}
То же самое можно сделать через элемент:
<link rel= "stylesheet" media= "screen and (max-width: 600px)" href= "style.css">
Типы оборудования:
| ՏԵՍԱԿԸ | ՆԿԱՐԱԳՐՈՒԹՅՈՒՆԸ |
| all | Для всех типов оборудования. |
| шрифт Брайля | Устройство на основе Брайля, предназначенное для слабовидящих. Этот тип устарел и больше не используется. |
| рельефный: | Для принтеров типа Брайля. |
| портативный: | Для смартфонов и подобных устройств. |
| Распечатать: | Для принтеров и других печатающих устройств. |
| проекция: | Для проекторов. |
| экран: | Для компьютерных мониторов. |
| speech | Для говорящих браузеров. |
| телетайп: | Для терминалов и ограниченных экранов. |
| tv | Для телевизоров. |
Մեդիա հարցումների տրամաբանական օպերատորներ
and
and - предназначено для определения нескольких условий. например
@media screen and (max-width: 600px) {
p {color: red;}
}
Стиль будет применяться ко всем типам, кроме смартфонов. Их максимальная ширина экрана составляет 600 пикселей.
В следующем примере и первое, и второе условие будут отклонены: ширина экрана не должна быть 600 пикселей и тип экрана.
@media not screen and (device-width: 600px)
only
only – предназначено для охвата условий запроса @media из старых браузеров, которые не поддерживают правило @media.
Браузеры, поддерживающие only оператор будет проигнорирован.
or
or - в случае определения нескольких условий они отделяются друг от друга запятыми, которые " or " - операторы.
Стиль будет использоваться, если хотя бы одно из условий верно:
@media (min-width: 700px), (orientation: landscape) {
p {color:red;}
}
Стиль будет установлен, если ширина экрана составляет 700 пикселей или более или если устройство находится в альбомной ориентации (т. е. когда ширина экрана больше высоты).
media հատկություններ
Свойства носителя определяют дополнительные условия устройства.
aspect-ratio(min-aspect-ratio, max-aspect-ratio)
aspect-ratio(min-aspect-ratio, max-aspect-ratio) – Определяет соотношение ширины и высоты области просмотра.
Значение этого свойства состоит из двух положительных чисел, расположенных на расстоянии друг от друга. косая черта ( / ) разделены. Первое – горизонтальное направление, второе – вертикальное.
Тип носителя, который будет использоваться с – handheld, print, projection, screen, tty, tv:
Как они будут выглядеть? aspect ratioопределения
Как рассчитать соотношение 16/10?
@media screen and (min-aspect-ratio: 16/10) {
p { color: red; }
}
Соотношение 16/10 типично для экранов ноутбуков..
Предположим, ширина элемента равна 600 пикселей. Соотношение 16/10 будет означать деление 600 на 16 и умножение результата 37,5 на 10. Конечный результат — 375 — это высота элемента.
Например:
color(min-color, max-color)
Тип носителя, который будет использоваться с – handheld, print, projection, screen, tty, tv:
Это свойство устанавливает количество цветов на экране в соответствии с указанными битами.
Каждый бит состоит из երկու տեսակի գույնից։ Два бита будут означать, что у нас будет 2×2=4 тип цвета, три бита: 2x2x2=8 тип цвет и т. д.
Любой цвет получается путем смешивания трех цветов: red-կարմիր, green-կանաչ, blue-կապույտ. это три цветовых канала. Когда количество бит установлено, оно применяется к каждому из каналов. Если установлено, скажем, 3, то каждый канал будет иметь 3-битный тип цвета, то есть всего 9 бит, что означает: 2x2x2x2x2x2x2x2x2 = 512 тип цвета.
Например:
@media screen and (color) {…}
если бит не указан, это может быть любой тип цветного оборудования.
@media screen and (min-color: 3) {…}
это означает, что дисплей должен поддерживать 512 или более типов цвета.
color-index (min-color-index, max-color-index)
Тип носителя, который будет использоваться с – handheld, print, projection, screen, tty, tv:
Если выше с помощью битов определялось, сколько цветов будет обеспечивать оборудование, то здесь указывается количество цветов.
Например:
@media screen and (min-color-index: 256) {…}
то есть оборудование должно обеспечивать 256 и более цветов.
device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)
Эта функция устарела.
device-height (min-device-height, max-device-height)
илиdevice-width(min-device-width, max-device-width)
@media screen and (min-device-height: 500)
Они устарели и вышли из употребления. Мы встретимся только в старых проектах.
grid
@media all and (grid: 1)
Тип носителя, который будет использоваться с – all:
Экран устройства должен быть grid вариант. Те например, текстовые терминалы или старые телефоны, не относящиеся к смартфонам (монохромные).
" grid: 1 "-grid по видам оборудования, и " grid: 0" - для современного оборудования.
height(min-height, max-height)
@media screen and (min-height: 500px)
Тип носителя, с которым будет использоваться – все, кроме speechот
Устанавливает высоту области отображения.
min-height — минимальная высота области.
max-height — максимальная высота области.
width(min-width, max-width)
@media screen and (min-width: 500px)
Тип носителя, с которым будет использоваться – все, кроме speechот
Определяет ширину области отображения.
min-width — минимальная ширина области.
max-width - максимальная площадь ширина.
monochrome(min-monochrome, max-monochrome)
@media print and (min-monochrome: 3)
Тип носителя, который будет использоваться с – handheld, print, projection, screen, tty, tv:
Устанавливает стиль для монохромных устройств одного цвета: например, черно-белые принтеры. Если указано, скажем, 3, то оборудование может обеспечить оттенок в 3 бита одного цвета.
Например:
@media print and (monochrome) { … }
Любой тип монохромного принтера.
@media print and (min-monochrome: 3) {…}
принтер монохромного типа, обеспечивающий не менее 3 бит цвета.
@media print and (monochrome: 0)
не монохромный принтер.
orientation(orientation: landscape կամ orientation: portrait)
@media handheld and (orientation: landscape) {…}
Тип носителя, который будет использоваться с – handheld, print, projection, screen, tty, tv:
Стиль будет установлен, если устройство вертикально (portrait) или: горизонтальный (пейзаж:) находится в направлении.
resolution (min-resolution, max-resolution)
@media handheld and (min-resolution: 300dpi)
Тип носителя, который будет использоваться с – handheld, print, projection, screen, tv:
Значение этого свойства установлено dpi, dpcm или dppxс
dpi - количество физических пикселей экрана на дюйм (равно 2,54 сантиметра).
dpcm за сантиметр количество физических пикселей на экране.
dppx -равен физическому 1 пикселю.
Например: min-resolution: 300dpi - количество физических пикселей на дюйм должно быть не менее 300.
scan(interlace կամ progressive)
@media tv and (scan: progressive)
Тип носителя, который будет использоваться с – tv :
Определяет тип сканирования экрана телевизора.
interlace - при сканировании телевизор показывает сначала нечетные строки кадра, потом четные.
progressive - при сканировании кадр переносится и отображается полностью.
Interlace Пример
Russian 
Armenian