Medienabfragen für @ 2x, @ 3x und @ 4x Bilder

Question

Ich versuche, eine Vielzahl von Pixelverhältnissen auf der aktuellen Website zu unterstützen, die ich entwickle. Ich möchte auch sicherstellen, dass ich alle erforderlichen Browserpräfixe zur Verfügung stelle, um die unterschiedlichsten Geräte/Browser im Rahmen des Zumutbaren zu unterstützen. Außerdem verwende ich SVGs, wo immer es möglich ist, aber ich brauche eine Lösung für fotografische Bilder. Im Idealfall würde Ich mag bieten:

1. @ 1x Bild (Pixelverhältnis 1,0)
2. @ 2x Bild (Pixelverhältnis von 1.25+)
3. @ 3x Bild (Pixelverhältnis von 2.25+)
4. @ 4x Bild (Pixelverhältnis von 3.25+)

ist meine Frage, was der beste Weg, um das Schreiben der Medien-Anfragen gehen würde dies zu erreichen? Meine Hauptsorge ist, dass meine Argumente für das, was ich erreichen möchte, richtig sind. Ich würde mich über Vorschläge oder Ratschläge freuen, die Sie haben. Derzeit ist mein Code ist wie folgt:

/* @1x Images (Pixel Ratio 1.0) */ 
#dgst_shopping_bag {background-image:url(img/shopping_bag.png);} 

/* @2x Images (Pixel Ratio of 1.25+) */ 
@media only screen and (-o-min-device-pixel-ratio: 5/4), 
     only screen and (-webkit-min-device-pixel-ratio: 1.25), 
     only screen and (min-device-pixel-ratio: 1.25), 
     only screen and (min-resolution: 1.25dppx) { 
    #dgst_shopping_bag {background-image:url(img/shopping_bag@2x.png);} 
} 

/* @3x Images (Pixel Ratio of 2.25+) */ 
@media only screen and (-o-min-device-pixel-ratio: 9/4), 
     only screen and (-webkit-min-device-pixel-ratio: 2.25), 
     only screen and (min-device-pixel-ratio: 2.25), 
     only screen and (min-resolution: 2.25dppx) { 
    #dgst_shopping_bag {background-image:url(img/shopping_bag@3x.png);} 
} 

/* @4x Images (Pixel Ratio of 3.25+) */ 
@media only screen and (-o-min-device-pixel-ratio: 13/4), 
     only screen and (-webkit-min-device-pixel-ratio: 3.25), 
     only screen and (min-device-pixel-ratio: 3.25), 
     only screen and (min-resolution: 3.25dppx) { 
    #dgst_shopping_bag {background-image:url(img/shopping_bag@4x.png);} 
} 

Alternative 1: Ich habe unter Berücksichtigung worden, um den <picture> Tag nutzen, dies zu erreichen. Ich weiß, dass Sie alternative Inhalte für Browser bereitstellen können, die <picture> nicht unterstützen, was mein Hauptanliegen bei der Verwendung wäre. Hältst du das für die beste Methode, um Fotos für mehrere Pixel zu erstellen?

Answer 1

Nun, ignorieren die offensichtlichen funktionalen Unterschiede zwischen einem Hintergrundbild und einem Inline-Bildelement wie picture, gibt es ein paar Vor- und Nachteile zwischen den beiden.

Pros für die Inline-Bild/Nachteile für background-image:

Es gibt keine Möglichkeit, eine Medien-Abfrage für einen Inline-Stil zu verwenden, und geben so ein background-image erfordert für einen Wähler erklärt trennen, was auch immer Elemente erfordern Hintergrundbilder aus dem Tag . Dies erschwert diese Lösung für dynamisch erstellte Elemente.

Wenn Sie nur Bilder mit unterschiedlichen Pixelverhältnissen liefern möchten, können Sie einfach das srcset attribute of an img tag anstelle des picture Elements verwenden. Das picture Element erfordert mehr Markup und hat eine Reihe von Funktionen, die dafür unnötig sind, und srcset wird etwas besser unterstützt.

Pros für background-image/Nachteile für die Inline-Bild:

Resolution-basierten Medien fragen are much better supported als the picture element und the srcset attribute. Einige Browser unterstützen derzeit weder das Element picture noch das Attribut srcset, obwohl sich die Unterstützung verbessert. Wenn Sie die Browser-Unterstützung für Firefox-Versionen älter als 16 maximieren möchten, können Sie the min--moz-device-pixel-ratio selector hinzufügen, die dieselbe Syntax wie -webkit-min-device-pixel-ratio hat Hier ist ein Beispiel mit Ihrem CSS.

/* @2x Images (Pixel Ratio of 1.25+) */ 
@media only screen and (-o-min-device-pixel-ratio: 5/4), 
     only screen and (-webkit-min-device-pixel-ratio: 1.25), 
     only screen and (min--moz-device-pixel-ratio: 1.25), 
     only screen and (min-device-pixel-ratio: 1.25), 
     only screen and (min-resolution: 1.25dppx) { 
    #dgst_shopping_bag {background-image:url(img/shopping_bag@2x.png);} 
} 

Best-Practice?

Die beste Methode wäre, Medienabfragen für Orte zu verwenden, für die Sie ein Hintergrundbild benötigen, und entweder srcset oder picture für Orte, an denen Sie ein Inline-Bild benötigen. Doch an dieser Stelle kann es wichtig sein, zu prüfen, welche Browser Sie unterstützen müssen. Dazu finden Sie in den kompatibel Links (möglicherweise bedenkt, dass viele Menschen mit älteren Browsern sind wahrscheinlich auch Standardauflösung Monitore verwenden):

• CSS media resolution
• picture element
• srcset attribute

Answer 2

wirklich verwenden, um die img[srcset] Attribut. Seine Unterstützung ist viel besser als der Staat in einer anderen Antwort. Aktuelle Chrome und Safari tun, um dieses Attribut unterstützen. Und wir wissen fest, dass Firefox 38 und IE 12 wird ebenfalls unterstützt wird. Zusätzlich wird die Syntax ermöglicht es Ihnen einfach progressive Erweiterung zu tun, und Sie brauchen keine komplexen Medien-Anfragen zu schreiben. Dies ist

, wie es aussieht:

<img src="img/shopping_bag@1x.png" srcset="img/shopping_bag@2x.png 2x, img/shopping_bag@3x.png 3x" /> 

Und falls Sie Unterstützung für nicht-unterstützende Browser hinzufügen möchten, können Sie zwischen differentpolyfills wählen.

Im Fall verwenden Sie polyfill Sie könnten das Markup dies ändern:

<img srcset="img/shopping_bag@1x.png, img/shopping_bag@2x.png 2x, img/shopping_bag@3x.png 3x" />