CODEWITHSUNDEEP
cssmedia-queries
Dennis Burton
Dennis Burton

Reputation: 3333

Is there a way to use DPI in css media queries instead of px

Number of pixels width and height does not always tell the whole story. That works great for adding or removing items from the screen, but isn't quite right for setting the right image. With the retina display on the MBP, a browser window set to half of the screen would have the same number of pixels in width as most machines today. Yet, images displayed would likely be too small given the higher DPI.

Is there a way to change out images based on DPI rather than the number of pixels width and height?

Upvotes: 28

Views: 55824

Answers (4)

bjelli
bjelli

Reputation: 10100

Since 2022 you can use a media query for resolution, min-resolution, max-resolution in all modern browsers.

header {
  background-image: url(low-res-background.jpg);
}
@media (resolution >= 2dppx) {
  header {
    background-image: url(hi-res-background.jpg);
  }
}

But CSS is not the only anwer. You can also just use HTML. Have a look at Resposive Images withe <img srcset=...>.

p.s.

You could also use dpi to specify resolution, but this only makes sense for print:

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

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

Upvotes: 7

Czarek Tomczak
Czarek Tomczak

Reputation: 20687

There are also <img srcset> and -webkit-image-set css function, but they seem to be supported only by Safari/Chrome/Opera. Example:

<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
);

I'm not sure if the examples in the accepted answer by Moin Zaman work on IE/Firefox. Probably "min-resolution" needs to be used:

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

Upvotes: 1

Moin Zaman
Moin Zaman

Reputation: 25465

You can do either:

<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)"
/>

or 

@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*/
}

Upvotes: 24

Jay Harris
Jay Harris

Reputation: 10075

What you are looking for is the Device Pixel ratio. Because things like the iPhone display like a 320px screen but with a 640px layout (Pixel ratio of 2). In media queries, use "device-pixel-ratio". Though I would make sure to still use the vendor prefixes.

A good post on it: http://menacingcloud.com/?c=highPixelDensityDisplays

Upvotes: 3

Related Questions