CSS Größe für retina-Bilder

Ich habe ein design für eine website, aufgeteilt in drei psd-Dateien: eine für desktop, eine für Tablets, eine für Smartphones. Ich mache alles responsive mit media queries und alles macht retina auch. Eine Sache, die mich stört ist aber das folgende.

So, sagen wir, zum Beispiel, haben Sie ein hintergrund-Bild für einen Facebook-link (icon). Dieses Symbol ist 48x48px in der desktop-psd. Das würde automatisch die Netzhaut Größe 96x96px mit den folgenden css:

@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) { 
   #fb {
       background: url("../images/fb_2x.png") no-repeat;
       background-size: 48px 48px;
       width: 48px;
       height: 48px;
   }
}

ABER, wenn ich mir das tablet und/oder smartphone psd, merke ich, dass das Symbol wurde geändert, um zu passen der rest des Designs. Das icon ist jetzt 28x28px. Wie kann ich als Ziel die retina-version des symbols, UND der Unterschied in der Größe pro Auflösung. Ich dachte, ich würde meine Netzhaut Medien Abfrage css:

#fb {
    background: url("../images/fb_2x.png") no-repeat;
    background-size: 28px 28px;
    width: 28px;
    height: 28px;
}

.. aber das bedeutet, dass ALLE retina-fähige Bildschirme (auch ipad retina und macbook pro retina) hätte das winzige icon-Größe der 28px (obwohl die Netzhaut), aber das ist nicht die original Größe: es ist 48x48px.

Vielen Dank für das Lesen und beraten!

InformationsquelleAutor Mathijs Delva | 2012-11-30
  1. 8

    Wie über diesen progressiven Ansatz:

        #fb {
      background: url("../images/fb_28.png") no-repeat;
      background-size: 100% auto;
      width: 28px;
      height: 28px;
    }

    /* bigger image for desktop OR high resolution */
    @media (min-width: $desktop-size), -webkit-min-device-pixel-ratio: 2),  ( min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1),  (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { 
      #fb {
        background-image: url("../images/fb_48.png");
      }
    }

    /* bigger size for desktop */
    @media (min-width: $desktop-size) {
      #fb {
        width: 48px;
        height: 48px;
      }
    }

    /* bigger image for high resolution desktop */
   @media (min-width: $desktop-size) and (-webkit-min-device-pixel-ratio: 2),  ( min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1),  (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)) {
      #fb {
        background-image: url("../images/fb_96.png");
      }
    }
    • Danke, guter sir, laut und deutlich!
    InformationsquelleAutor Andy
Schreibe einen Kommentar