Understanding Retina device CSS Media queries

问题

I am working on a WordPress theme and am trying to incorporate retina enabled CSS queries into my CSS file.

I would just like to clarify that I have the media queries set up correctly before I change out all my background images.

I have doubled the size of all my background images and perfixed them with the "@2x" naming convention. e.g icon-user@2x.png.
I have added a jQuery function into my code to swap out the images with the CSS class of hires.
In my CSS document I have a normal CSS class for a background image.

Normal CSS query

.side-nav .arrow {
  background: url(../images/arrow-nav.png) no-repeat top left;
  width: 5px;
  height: 8px;
  display: inline-block;
  margin-left: 10px
}

Is this the correct way i would change the .side-nav .arrow class for a retina enabled device? When declaring the background size do I keep the size that of the original smaller image?

/* All Retina Ready devices larger than 1.5 pixel ratio */
@media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {

    .side-nav .arrow { 
        background-image:url(../images/arrow-nav@2x.png); 
        -webkit-background-size:5px 8px;
        -moz-background-size:5px 8px;
        -o-background-size:5px 8px;
        background-size:5px 8px 
    }
}

jQuery Code

$(function () {

    if (window.devicePixelRatio == 2) {

          var images = $("img.hires");

          /* loop through the images and make them hi-res */
          for(var i = 0; i < images.length; i++) {

            /* create new image name */
            var imageType = images[i].src.substr(-4);
            var imageName = images[i].src.substr(0, images[i].src.length - 4);
            imageName += "@2x" + imageType;

            /* rename image */
            images[i].src = imageName; 
          }
     }

});

Thank you

回答1:

As long as there is some form of scaling taking place, like when you declare

<meta name="viewport" content="width=..."> (for android/ios/blackberry/WP8)

@ms-viewport {width: ... ;} (for non-WP8 IE10)

or ... even if you declare nothing most mobile devices will by default automatically scale such that viewport width=980px

then all CSS dimensions you declare with 'px' will exist in the same proportion to their viewport regardless of differences between their physical DPI/PPI

this means you shouldn't have to change a single thing about your style class except the background image's URL when the media query matches a high res device:

@media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
    .side-nav .arrow { 
         background-image:url(../images/arrow-nav@2x.png);
     }
}

来源：https://stackoverflow.com/questions/15456436/understanding-retina-device-css-media-queries

标签

image

css3

media

media-queries

retina-display