Geek Answers Handbook

CSS Resizing for Retina Images

I got a website design divided into three psd: one for the desktop, one for the tablet, one for the smartphone. I do everything responsive with media queries and do all the retina. One thing that bothers me is this.

So let's say, for example, you have a background image for a Facebook link (icon). This icon is 48x48px on the desktop psd. This will automatically make the retina size 96x96px using the following css:

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #fb { background: url("../images/fb_2x.png") no-repeat; background-size: 48px 48px; width: 48px; height: 48px; } }

BUT, when I look at the tablet and / or smartphone psd, I notice that the icon has been changed to fit the rest of the design. The icon is now 28x28px. How can I target both the mesh version of this icon and the resolution size difference. I thought I would change my retina grid query:

 #fb { background: url("../images/fb_2x.png") no-repeat; background-size: 28px 28px; width: 28px; height: 28px; }

.. but that means ALL screens that support the retina (also ipad retina and macbook pro retina) would have such a small icon size of 28px (although the retina); but this is not the original size: it is 48x48px.

Thanks for reading and advice!

+4
source share
1 answer

How about this progressive approach:

  #fb { background: url("../images/fb_28.png") no-repeat; background-size: 100% auto; width: 28px; height: 28px; } /* bigger image for desktop OR high resolution */ @media (min-width: $desktop-size), -webkit-min-device-pixel-ratio: 2), ( min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { #fb { background-image: url("../images/fb_48.png"); } } /* bigger size for desktop */ @media (min-width: $desktop-size) { #fb { width: 48px; height: 48px; } } /* bigger image for high resolution desktop */ @media (min-width: $desktop-size) and (-webkit-min-device-pixel-ratio: 2), ( min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)) { #fb { background-image: url("../images/fb_96.png"); } }
+8
source

More articles:


All Articles