Медиавозможность CSS `resolution`

Baseline Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с сентября 2022 года.

Медиавозможность resolution CSS медиавозможность можно использовать для проверки плотности пикселей устройства вывода.

Синтаксис

Медиавозможность resolution задаётся значением <resolution>, представляющим плотность пикселей устройства вывода. Это функция диапазона, поэтому для проверки минимального и максимального значений можно также использовать варианты с префиксами min-resolution и max-resolution соответственно.

Примеры

HTML

<p>This is a test of your device's pixel density.</p>

CSS

/* Exact resolution with unit `dpi` */
@media (resolution: 150dpi) {
  p {
    color: red;
  }
}

/* Minimum resolution synonym units: `dppx` and `x` */
@media (min-resolution: 2dppx) {
  p {
    text-decoration: underline;
  }
}

@media (min-resolution: 2x) {
  p {
    text-decoration: underline;
  }
}

/* Maximum resolution with unit `dpcm` */
@media (max-resolution: 2dpcm) {
  p {
    background: yellow;
  }
}

Результат

Спецификации

Спецификация
Media Queries Level 4 # resolution

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

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`resolution`	29	12	8 3.5–8 Поддерживаются только значения `<integer>`.	16 10–15	16	29	8 4–8 Поддерживаются только значения `<integer>`.	16 10.1–14	16	2.0	4.4	16

См. также

window.devicePixelRatio
Свойство image-resolution

© 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/At-rules/@media/resolution