Eu estou trabalhando em um tema WordPress e estou tentando incorporar retina habilitado consultas CSS em meu arquivo CSS.

Gostaria apenas de esclarecer que tenho as consultas de mídia configuradas corretamente antes de alterar todas as minhas imagens de fundo.

Eu dobrei o tamanho de todas as minhas imagens de plano de fundo e as agreguei com a convenção de nomenclatura "@ 2x". por exemplo[email protected].Eu adicionei uma função jQuery no meu código para trocar as imagens com a classe CSS dehires.No meu documento CSS eu tenho uma classe CSS normal para uma imagem de fundo.

Consulta normal de CSS

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

Esta é a maneira correta que eu mudaria a classe .side-nav .arrow para um dispositivo habilitado para retina? Ao declarar o tamanho do plano de fundo, mantenho o tamanho da imagem menor original?

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

Código 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; 
          }
     }

});

Obrigado