HD & Retina Display Media Queries

ゞ浴缸里的玫瑰 2022-09-20 15:22 141阅读 0赞

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

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

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

Original blog post: [http://www.uifuel.com/hd-retina-display-media-queries/][http_www.uifuel.com_hd-retina-display-media-queries]

# #

[http_www.uifuel.com_hd-retina-display-media-queries]: http://www.uifuel.com/hd-retina-display-media-queries/