Affiche de rétine, images de fond de haute résolution

Question

Cela peut paraître comme une question idiote.

Si j’utilise cet extrait de code CSS pour les affichages réguliers (où `` est 200px de 200px) ;

et si j’utilise une requête de média comme cela à écrans rétine cible (avec la @2 x image étant la version haute résolution) ;

Je dois doubler la taille de la `` div à 400px par 400px pour correspondre à la nouvelle image de fond de haute résolution ?

Answer 1

Non, mais vous avez besoin de définir l' background-size propriété pour correspondre à l'original dimensions:

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{
        background:url('images/box-bg@2x.png') no-repeat top left;
        background-size: 200px 200px;
    }
}

---

MODIFIER

Pour ajouter un peu plus à cette réponse, voici la rétine de détection de la requête, j'ai tendance à utiliser:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

}

- Source

NB. Cette min--moz-device-pixel-ratio: n'est pas une faute de frappe. Il est bien documenté bug dans certaines versions de Firefox et devrait être écrit comme cela dans le but de prendre en charge les anciennes versions (avant Firefox 16). - Source

---

@LiamNewmarch mentionné dans les commentaires ci-dessous, vous pouvez inclure l' background-size dans votre abréviation background déclaration:

.box{
    background:url('images/box-bg@2x.png') no-repeat top left / 200px 200px;
}

Cependant, personnellement, je ne vous conseille pas d'utiliser la forme abrégée comme il n'est pas pris en charge dans iOS <= 6 ou Android rendant peu fiables dans la plupart des situations.

Answer 2

Voici une solution qui comprend également Élevé(re)PPP (MDPI) périphériques > ~160 points par pouce comme tout à fait un peu de non-Appareils iOS (f.e.: Google Nexus 7 2012):

.box {
    background: url( 'img/box-bg.png' ) no-repeat top left;
    width: 200px;
    height: 200px;
}
@media only screen and ( -webkit-min-device-pixel-ratio: 1.3 ),
       only screen and (    min--moz-device-pixel-ratio: 1.3 ),
       only screen and (      -o-min-device-pixel-ratio: 2.6/2 ), /* returns 1.3, see Dev.Opera */
       only screen and (         min-device-pixel-ratio: 1.3 ),
       only screen and ( min-resolution: 124.8dpi ),
       only screen and ( min-resolution: 1.3dppx ) {

       .box {
           background: url( 'img/box-bg@2x.png' ) no-repeat top left / 200px 200px;
       }

}

@3rror404 inclus dans son édition après réception des commentaires de commentaires, il y a un Monde au-delà de Webkit/iPhone. Une chose qui me dérange avec la plupart des solutions sur Internet jusqu'à présent comme celui référencé en tant que source ci-dessus au CSS-Tricks, c'est que ce n'est pas pleinement pris en compte.
La source d'origine a déjà plus loin.

Comme un exemple de la Nexus 7 (2012) de l'écran est un TVDPI écran avec un étrange device-pixel-ratio de 1.325. Lorsque le chargement des images avec la résolution normale ils sont agrandies par interpolation et donc floue. Pour moi, l'application de cette règle dans les médias requête pour inclure ces dispositifs ont apporté le meilleur de feedback de la clientèle.