¿Está utilizando la propiedad css3 'tamaño de fondo' suficiente para mostrar la retina?

Para ser lo más conciso posible, prefiero no utilizar una hoja de estilo de consulta de medios que se incluye si mi página se ve con un dispositivo de doble densidad de píxeles, como el iPhone 4.¿Está utilizando la propiedad css3 'tamaño de fondo' suficiente para mostrar la retina?

Dicho esto , ¿estaría bien si hiciera algo como esto?

.icon-1 { 
    background-image: url('my-image-64px.png'); // This image is 64 x 64 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: 32px 32px; 
}

¿Funcionaría de esta manera sin inconvenientes? ¿O debería hacer algún tipo de consulta de medios para dispositivos con una cierta densidad de píxeles?

Fuente

2011-03-29 Groovetrain

Sí, lo haría. El único inconveniente es descargar una imagen que es mucho más grande de lo que necesita en pantallas que no sean retina. Recomendaría que tenga imágenes que no sean retina para todo en la hoja de estilo principal (con el tamaño de fondo establecido para todas las imágenes) e incluya una hoja de estilo retina según sea necesario que anule todas las URL de imagen con enlaces a imágenes de tamaño retina.

Es un poco más de trabajo, pero la gente con conexiones móviles le agradecerá.

Ah, y tu camino también reducirá la resolución de imagen, lo que puede estar o no estar bien. Si tiene líneas anchas de 1px (por ejemplo) en la imagen, es posible que no se reduzca de una manera que le parezca agradable. Pero para la mayoría de los tipos de imágenes, probablemente será aceptable.

Fuente

2011-03-30 01:31:10

Vale la pena mencionar que con la compresión jpeg puede lograr tamaños de archivo ish idénticos. Después de leer sobre esto en Internet, hice 2 versiones de una foto en diferentes tamaños y compresión: 400x300 @ 80 y 800x600 @ 43. Ambos 37kB de tamaño. La versión de la retina se veía mucho mejor incluso en una pantalla que no retina. Por supuesto, esto funciona solo con imágenes jpg que no tienen pequeños detalles. – jpeltoniemi

para responder a sus "consulta de medios para dispositivos con cierta densidad de píxeles", la respuesta es sí:

media='only screen and (-webkit-min-device-pixel-ratio: 2)

Fuente

2012-03-22 19:51:59 dmackerman

Usted no quiere decir '-webkit-', ¿verdad? :) – BoltClock

Yo hago. :) Buena captura. – dmackerman

, además del puesto de dmackerman, que incluyen una consulta de medios para el navegador no webkit apoyo superior densidades, se podría escribir:

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

}

@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { 

}

que producen el mismo resultado.

Fuente

2013-03-28 08:42:29 Sebastian

¿Está utilizando la propiedad css3 'tamaño de fondo' suficiente para mostrar la retina?

Respuesta

Cuestiones relacionadas