96 votos

Las pantallas Retina de alta resolución, imágenes de fondo

Esto puede sonar como una pregunta tonta.

Si yo uso este fragmento de CSS para regular muestra (Donde box-bg.png es de 200px por 200px);

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

y si puedo usar una consulta de medios como este para orientar las pantallas retina (Con la @2x imagen en alta resolución de la versión);

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

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

Necesito el doble del tamaño de la .box div a 400px por 400px para que coincida con la nueva alta resolución de la imagen de fondo?

170voto

Moobs Puntos 8346

No, pero sí es necesario para establecer el background-size de la propiedad para que coincida con las dimensiones originales:

@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;
    }
}

EDITAR

Para añadir un poco más a esta respuesta, aquí está la retina de detección de consulta que tienden a usar:

@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) { 

}

- Fuente

NB. Este min--moz-device-pixel-ratio: no es un error tipográfico. Es un bien documentado error en ciertas versiones de Firefox y debe ser escrito como este en el fin de apoyar a las versiones anteriores (antes de Firefox 16). - Fuente


Como @LiamNewmarch se menciona en los comentarios a continuación, puede incluir el background-size en su taquigrafía background declaración así:

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

Sin embargo, yo personalmente no recomendaría el uso de la taquigrafía forma, ya que no es compatible con iOS <= 6 o Android, lo que es poco fiable en la mayoría de las situaciones.

13voto

Volker E. Puntos 1654

He aquí una solución que incluye también Alta(er)DPI (MDPI) dispositivos > ~160 puntos por pulgada como muy pocos no-Dispositivos iOS (f.e.: Google Nexus 7 De 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;
       }

}

Como @3rror404 incluyó en su edición después de recibir retroalimentación de los comentarios, hay un Mundo más allá de Webkit/iPhone. Una cosa que me molesta con la mayoría de las soluciones en Internet hasta el momento como el que se hace referencia como fuente de arriba en CSS-Tricks, es que esto no es tomado en cuenta.
La fuente original se fue ya más.

Como ejemplo el Nexus 7 (2012) es una pantalla de TVDPI pantalla con un extraño device-pixel-ratio de 1.325. Cuando la carga de imágenes con la resolución normal son convertidos a través de la interpolación y por lo tanto borrosa. Para mí, la aplicación de esta regla en la consulta de medios de comunicación para incluir a aquellos dispositivos que trajo los mejores comentarios de los clientes.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X