Pracuję nad motywem WordPress i próbuję włączyć zapytania CSS z włączoną retiną do mojego pliku CSS.

Chciałbym tylko wyjaśnić, że mam poprawnie skonfigurowane zapytania multimedialne, zanim zmienię wszystkie moje obrazy tła.

Podwoiłem rozmiar wszystkich moich obrazów tła i udoskonaliłem je za pomocą konwencji nazewnictwa „@ 2x”. na przykład[email protected].Dodałem funkcję jQuery do mojego kodu, aby zamienić obrazy z klasą CSShires.W moim dokumencie CSS mam normalną klasę CSS dla obrazu tła.

Normalne zapytanie CSS

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

Czy jest to właściwy sposób, w jaki zmieniłbym klasę .side-nav .arrow na urządzenie z siatkówką? Czy deklarując rozmiar tła, zachowuję rozmiar oryginalnego mniejszego obrazu?

/* 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/[email protected]); 
        -webkit-background-size:5px 8px;
        -moz-background-size:5px 8px;
        -o-background-size:5px 8px;
        background-size:5px 8px 
    }
}

Kod jQuery

$(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; 
          }
     }

});

Dziękuję Ci