Есть ли способ использовать DPI в css-медиа-запросах вместо px

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

Есть ли способ изменить изображения на основе DPI, а не на количество пикселей и высоту?

Ответ 1

Вы можете сделать либо:

<link
    rel="stylesheet"
    type="text/css"
    href="/css/retina.css"
    media="only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)"
/>

или

@media only screen and (-moz-min-device-pixel-ratio: 2), 
       only screen and (-o-min-device-pixel-ratio: 2/1), 
       only screen and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (min-device-pixel-ratio: 2) {
 /*use CSS to swap out your low res images with high res ones here*/
}

Ответ 2

Что вы ищете, так это соотношение пикселей устройства. Потому что такие вещи, как iPhone, выглядят как экран 320 пикселей, но с макетом 640 пикселей (соотношение пикселей 2). В мультимедийных запросах используйте "отношение пикселей к устройствам". Хотя я бы не стал использовать префиксы поставщика.

Хорошая публикация на нем: http://menacingcloud.com/?c=highPixelDensityDisplays

Ответ 3

Существуют также функции <img srcset> и -webkit-image-set css, но они, похоже, поддерживаются только Safari/Chrome/Opera. Пример:

<img src="image.png" srcset="image-1x.png 1x, 
     image-2x.png 2x, image-3x.png 3x">

background-image:  -webkit-image-set(
     url(icon1x.jpg) 1x,
     url(icon2x.jpg) 2x
);

Я не уверен, что примеры в принятом ответе Moin Zaman работают над IE/Firefox. Вероятно, нужно использовать "минимальное разрешение":

@media only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx)

Ответ 4

В 2019 году вы можете использовать медиазапрос для разрешения, минимального разрешения и максимального разрешения во всех современных браузерах, кроме Safari:

@media (min-resolution: 72dpi) {
  p {
    text-decoration: underline;
  }
}

См https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution