`<resolution>` тип CSS
Базовый уровень Широко доступно
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она доступна во всех браузерах с сентября 2022 года.
<resolution> CSS — это тип данных, используемый для описания разрешения в медиазапросах. Он обозначает плотность пикселей устройства вывода, то есть его разрешение.
На экранах единицы измерения связаны с дюймами, сантиметрами или пикселями CSS, а не с физическими величинами.
Синтаксис
Тип данных <resolution> состоит из строго положительного числа <number>, за которым следует одна из перечисленных ниже единиц измерения. Как и для всех размерностей CSS, между числом и обозначением единицы измерения нет пробела.
Единицы измерения
-
dpi - Обозначает количество точек на дюйм. Экраны обычно содержат 72 или 96 точек на дюйм, но dpi для печатных документов, как правило, значительно выше. Поскольку 1 дюйм равен 2,54 см,
1dpi ≈ 0.39dpcm. -
dpcm - Обозначает количество точек на сантиметр. Поскольку 1 дюйм равен 2,54 см,
1dpcm ≈ 2.54dpi. -
dppx - Обозначает количество точек на единицу
px. Из-за фиксированного соотношения CSSinк CSSpx, равного 1:96,1dppxэквивалентно96dpi, что соответствует разрешению по умолчанию для изображений, отображаемых в CSS, согласно определениюimage-resolution. -
x - Псевдоним для
dppx.
Примечание: Хотя число 0 всегда одинаково независимо от единицы измерения, указывать единицу измерения всё равно необходимо. Иными словами, 0 недопустимо и не обозначает 0dpi, 0dpcm или 0dppx.
Примеры
Использование в медиазапросе
@media print and (resolution >= 300dpi) {
/* … */
}
@media (resolution: 120dpcm) {
/* … */
}
@media (resolution >= 2dppx) {
/* … */
}
@media (resolution: 1x) {
/* … */
}
Допустимые значения разрешения
96dpi 50.82dpcm 3dppx
Недопустимые значения разрешения
72 dpi Spaces are not allowed between the number and the unit. ten dpi The number must use digits only. 0 The unit is required.
Спецификации
| Спецификация |
|---|
| Модуль значений и единиц CSS уровня 4 # resolution |
Совместимость с браузерами
| Настольные | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | WebView на iOS | |
resolution |
29 |
12 |
8
3.5–8Поддерживаются только значения<integer>. |
9.5 |
16 |
29 |
8
4–8Поддерживаются только значения<integer>. |
10.1 |
16 |
2.0 |
4.4 |
16 |
dpcm |
29 |
12 |
8 |
16
10–15
|
16 |
29 |
8 |
16
10.1–14
|
16 |
2.0 |
4.4 |
16 |
dpi |
29 |
12 |
8 |
16
10–15
|
16 |
29 |
8 |
16
10.1–14
|
16 |
2.0 |
4.4 |
16 |
dppx |
29 |
12 |
16 |
12.1 |
16 |
29 |
16 |
12.1 |
16 |
2.0 |
4.4 |
16 |
x |
68 |
79 |
62 |
55 |
16 |
68 |
62 |
48 |
16 |
10.0 |
68 |
16 |
См. также
- Функция медиазапроса resolution
- Свойство
image-resolution - Использование медиазапросов @media
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/resolution
