<resolution>

Базовая версия 2022

Новая доступность

С сентября 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. Из-за фиксированного отношения 1:96 CSS in к CSS px, 1dppx эквивалентно 96dpi, что соответствует значению по умолчанию разрешения изображений, отображаемых в CSS, как определено в image-resolution.
x: Псевдоним для dppx.

Примечание: Хотя число 0 всегда одинаково независимо от единицы измерения, единицу нельзя опустить. Другими словами, 0 является недопустимым и не представляет 0dpi, 0dpcm, или 0dppx.

Примеры

Использование в запросе к среде

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

@media (resolution: 120dpcm) {
  /* … */
}

@media (min-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 Values and Units Module Level 4 # resolution

Совместимость браузеров

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`resolution`	29	12	8 3.5 Поддерживает только значения `<integer>`.	9.5	16	29	8 4 Поддерживает только значения `<integer>`.	10.1	16	2.0	4.4
`dpcm`	29	12	8	1610–15	16	29	8	1610.1–14	16	2.0	4.4
`dpi`	29	12	8	1610–15	16	29	8	1610.1–14	16	2.0	4.4
`dppx`	29	12	16	12.1	16	29	16	12.1	16	2.0	4.4
`x`	68	79	62	55	16	68	62	48	16	10.0	68

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/resolution