Esto puede sonar como una pregunta tonta.

Si puedo usar este fragmento de CSS para regular muestra (Donde box-bg.png es 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/[email protected]') 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?

  • ¿Cuál es la dimensión de images/[email protected]? Por favor ponerlo a la pregunta para ser absolutamente claro.
InformationsquelleAutor Dean Elliott | 2013-04-22

3 Comentarios

  1. 174

    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/[email protected]') 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, usted puede incluir la background-size en su taquigrafía background declaración así:

    .box{
        background:url('images/[email protected]') 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.

    • cualquier sugerencia a usted le ofrecen para configurar el fondo de tamaño completo, fondo de la página? sé que la componente x de la anchura, pero ¿y?
    • En ese caso, usted probablemente querrá ser el uso de background-size: cover; . Esto mantendrá la relación de aspecto, mientras que «cubrir» todo el fondo con la imagen.
    • Si usted quisiera, usted puede integrar el background-size de la propiedad en el background así: background: url('images/[email protected]') no-repeat top left / 200px 200px. Tenga en cuenta que los navegadores que no admitan background-size ignora esta regla.
    • Yo no recomendaría que a mí mismo como Android no parece comprender la forma abreviada
    • ah bueno, justo lo suficiente. Gracias!
    • En su opinión, es insignificante, que el background-size propiedad no es compatible con algunos navegadores, dado que la mayoría de los dispositivos que utilizan pantallas de retina será el uso de los navegadores modernos?
    • Hay probablemente debería ser el .box {} código en el segundo bloque de código (extended retina consulta) también? Ahora está vacía y es confuso.
    • +1 Gran respuesta!
    • gran hallazgo; y, por cierto, es una mejor idea para usar de esa manera, especialmente si usted tiene un hidpi de la imagen, ya que el conjunto de la declaración es aceptada, o nada de eso, sin hidpi imagen de 100px x 100px (en hiDPI píxeles) que terminan siendo zommed en su tamaño real de 200px x 200px (en no-DPI píxeles).

  2. 13

    He aquí una solución que también incluye Alta(er)DPI (MDPI) dispositivos > ~160 puntos por pulgada como muy pocos no-Dispositivos 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/[email protected]' ) 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 de alrededor de tan lejos como el que se hace referencia como fuente de arriba en CSS-Tricks, es que esto no es tomado en cuenta.

    El 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 sucedió en el mejor de los comentarios de los clientes.

    • Una imagen 2x de cada dimensión tiene exactamente 4 veces más píxeles (por ejemplo, pueden, en teoría, se espera que se 4x en tamaño), mientras que 1.325 * 1.325 sólo admite 1.755625 aumento en píxeles. Creo que la calidad de la imagen se perdería cualquier manera con 1.325 dppi, pero si vas HiDPI, a continuación, el cliente simplemente tendrá que esperar más tiempo para que la carga de la página tendrá un mayor consumo de energía tamaño de la imagen (y Nexus 7 tablas son muy conocidos para el reinicio aleatorio), y consumen más ancho de banda. Así que, me gustaría recomendar que se pegue con @2x sólo se sirve a 2dppx+ clientes.
  3. 1

    Si usted está planeando utilizar la misma imagen de la retina y no retina pantalla, a continuación, aquí está la solución. Decir que tienes una imagen de 200x200 y tener dos iconos en la parte superior de la fila y dos icono en la fila inferior. Así, los cuatro cuadrantes.

    .sprite-of-icons {
      background: url("../images/icons-in-four-quad-of-200by200.png") no-repeat;
      background-size: 100px 100px /* Scale it down to 50% rather using 200x200 */
    }
    
    .sp-logo-1 { background-position: 0 0; }
    
    /* Reduce positioning of the icons down to 50% rather using -50px */
    .sp-logo-2 { background-position: -25px 0 }
    .sp-logo-3 { background-position: 0 -25px }
    .sp-logo-3 { background-position: -25px -25px }

    De escala y la posición del sprite iconos a 50% de valor real, usted puede conseguir el resultado esperado.


    Otra práctica SECS mixin solución por Ryan Benhase.

    /****************************
     HIGH PPI DISPLAY BACKGROUNDS
    *****************************/
    
    @mixin background-2x($path, $ext: "png", $w: auto, $h: auto, $pos: left top, $repeat: no-repeat) {
    
      $at1x_path: "#{$path}.#{$ext}";
      $at2x_path: "#{$path}@2x.#{$ext}";
    
      background-image: url("#{$at1x_path}");
      background-size: $w $h;
      background-position: $pos;
      background-repeat: $repeat;
    
      @media all and (-webkit-min-device-pixel-ratio : 1.5),
      all and (-o-min-device-pixel-ratio: 3/2),
      all and (min--moz-device-pixel-ratio: 1.5),
      all and (min-device-pixel-ratio: 1.5) {
        background-image: url("#{$at2x_path}"); 
      }
    }
    
    div.background {
      @include background-2x( 'path/to/image', 'jpg', 100px, 100px, center center, repeat-x );
    }

    Para obtener más información sobre mixin LEER AQUÍ.

Dejar respuesta

Please enter your comment!
Please enter your name here