Есть ли способ использовать 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