jlrerg
Last Updated: October 06, 2018
·
8.292K
· micjamking

HD & Retina Display Media Queries

Resolution media queries work just like size threshold (e.g., max-width) media queries, except you’re defining a break-point based on a resolution density. This is extremely useful when you need to get your images & icons looking crisp on high-definition & Retina display devices. The basic syntax is essentially the same as other media queries:


@media only screen and (min-resolution: 200dpi){ /* Resolution-specific CSS & images */ } </code> </pre> For increased specificity for different pixel densities and cross-browser support, utilize the min-device-pixel-ratio properties and dppx (dots per pixel unit) resolution specification: @media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and ( min--moz-device-pixel-ratio: 1.25), only screen and ( -o-min-device-pixel-ratio: 1.25/1), only screen and ( min-device-pixel-ratio: 1.25), only screen and ( min-resolution: 200dpi), only screen and ( min-resolution: 1.25dppx) { /* Resolution-specific CSS & images */ } </code> </pre> Where did I get the resolution (200dpi) and min-device-pixel-ratio (1.25) values? 160dpi is considered the baseline for screen pixel density, since it’s a 1:1 screen-pixel to device-pixel ratio. Apple’s Retina display is a 2:1 screen-pixel to device-pixel ratio, which is about 320 dpi (326ppi to be more accurate). If you only want to target Retina displays, then setting min-device-pixel-ratio: 2 & min-resolution: 192dpi should be fine. However, Android supports a range of different dpi devices, including mdpi (160dpi), hdpi (240dpi), xhdpi (320dpi) and anywhere in between. For example, the new Asus Nexus 7 tablet has a 1280 x 800 HD display at 216dpi. Setting min-device-pixel-ratio: 1.25 & resolution: 200dpi will serve every device with a 25% higher than normal resolution your crisp icons and HD specific CSS (which is the technique I use on this blog). Background Images & Icons The trick to serving background images & icons for HD/Retina displays is utilizing the new background-size CSS3 property in your resolution media query. Just set the background-size: property’s value equal to the width of the non-Retina image & you’re all set: /* Normal Resolution CSS */ .logo{ width: 120px; background: url(logo.png) no-repeat 0 0; ... } /* HD/Retina CSS / @media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and ( min--moz-device-pixel-ratio: 1.25), only screen and ( -o-min-device-pixel-ratio: 1.25/1), only screen and ( min-device-pixel-ratio: 1.25), only screen and ( min-resolution: 200dpi), only screen and ( min-resolution: 1.25dppx) { .logo{ background: url(logo@2x.png) no-repeat 0 0; background-size: 120px; / Equal to normal logo width */ } } </code> </pre> Original blog post: http://www.uifuel.com/hd-retina-display-media-queries/

3 Responses
Add your response

11629

This finally recognizes my android device (HTC One) but how do you get modifications between orientations... this might seem silly but this is what I tried. Thanks!!

@media only screen and (orientation:portrait),
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx)
{

over 1 year ago ·
30466

To make sure that my web page isn't too tiny to read on a mobile retina display, I'm using a media query and then doubling almost all of my pixel sizes, like:

body {
font-size: 16px;
line-height: 26px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {
font-size: 32px;
line-height: 52px;
}
}https://downloadnox.com/ https://showbox.software/ https://mobdro.onl/
All my margins, padding, heights, and widths on a retina display are twice what they are on non-retina. But this results in a lot of redundant CSS to simply specify a value that's double the value it's overriding.

There wouldn't be any way to make this less redundant, would there? Some rule to put inside the @media query to say "double all values unless I override them otherwise"?

3 months ago ·
30897

Background Images & Icons

The trick to serving background images & icons for HD/Retina displays is utilizing the new background-size CSS3 property in your resolution media query. Just set the background-size: property’s value equal to the width of the non-Retina image & you’re all set:

/* Normal Resolution CSS */
.logo{
width: 120px;
background: url(logo.png) no-repeat 0 0;
...
}

/* HD/Retina CSS /
@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx)
{
.logo{
background: url(logo@2x.png) no-repeat 0 0;
background-size: 120px; /
Equal to normal logo width */
}
}

Arjun Dixit;
http://movieboxhdapp.org/movie-hd-app-apk https://tutuappapk.vip https://tutuhelperx.com https://emus4u.co

about 2 months ago ·