Mit der ständig wachsenden Reihe von Retina-Display-Produkten, die derzeit nur von Apple angeboten werden, ist es höchste Zeit, dass Ihr WordPress-Theme auf diesen Geräten heiß aussieht. In diesem Artikel gehe ich auf die verschiedenen Optionen ein, die Sie haben, um Ihren Themen Retina-Unterstützung hinzuzufügen.
Was ist Netzhaut?
Retina Display ist ein von Apple verwendeter Markenname für Flüssigkristalldisplays, deren Pixeldichte so hoch ist, dass das menschliche Auge bei einem typischen Betrachtungsabstand keine Pixelbildung wahrnehmen kann (http://en.wikipedia.org/wiki/Retina_Display).
WIE BEEINFLUSST DIES DIE BILDER IN IHREN THEMEN?
Ein typischer Monitor ist 72ppi oder Pixel pro Zoll, ein Retina-Display reicht dagegen von 135-300ppi. Was bedeutet dies für die Bilder in Ihrem Design? Nun, das Betrachten eines 72-ppi-Bildes auf Ihrem Standard-LCD-Monitor sieht gut und gut aus, aber ziehen Sie dasselbe Bild auf einem Retina-Anzeigegerät hoch, und es erscheint zur Hölle verschwommen. Wie beheben wir diese Situation? Lesen Sie weiter, mein Freund…
1. CSS3 > Bilder
Die wahrscheinlich naheliegendste Option ist die Verwendung von CSS3, wobei die Browserunterstützung von Tag zu Tag besser wird – die Verwendung von CSS3-Eigenschaften ist ein Kinderspiel. Dinge wie lineare Hintergrundverläufe, Randradius, Box-Shadow & Text-Shadow gekoppelt mit RGBA Wenn sie zusammen verwendet werden, können zum Beispiel schöne Schaltflächen wie im folgenden Beispiel erstellt werden. Ohne die Verwendung von Bildern wird Ihre Site umso schneller geladen, je weniger HTTP-Anforderungen erforderlich sind.
2. @2x Bilder
@2x, WTH ist das!? Denken Sie an 72ppi-Bilder, den aktuellen Standard als @1x, die auf normalen Displays großartig aussehen. Jetzt mit Retina-Displays sehen Sie im Grunde die doppelte Auflösung, hier kommt @2x ins Spiel, macht das Sinn, oder? Grundsätzlich ist @2x der Standard für Retina-Bilder und -Grafiken, der von Apple eingeführt wurde.
Wenn Sie es verwenden, haben Sie Ihre 72ppi-Datei in etwa logo.png und eine andere logo@2x.png, ziemlich einfach.
WIE SERVIEREN SIE DIESES @2X-BILD AUF RETINA-GERÄTEN?
Ein großartiges Open-Source-Skript Retina.js macht es wahnsinnig einfach, hochauflösende Bilder auf Retina-Geräten bereitzustellen. Existiert in diesem Fall eine hochauflösende Variante dieses Bildes logo@2x.png, tauscht das Skript dieses Bild automatisch an Ort und Stelle aus. So einfach ist das.
Wenn Sie Hintergrundbilder in CSS verwenden, müssen Sie eine einfache Medienabfrage verwenden, etwa:
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
#menu-icon { background-image: url(../images/icons/menu@2x.png);}
}
3. Inline-Bildelemente
Nehmen wir an, Sie haben eine große Fotogalerie und es kommt nicht in Frage, zwei Versionen jedes Bildes zu erstellen. Ein weiteres großartiges Open-Source-Skript ist Foresight.js, gibt Ihrem Theme die Möglichkeit zu erkennen, ob das Gerät des Benutzers hochauflösende Bilder anzeigen kann, bevor es vom Server angefordert wird. Es überprüft auch, ob das Benutzergerät derzeit über eine ausreichend schnelle Netzwerkverbindung für hochauflösende Bilder verfügt. Je nach Geräteanzeige und Netzwerkkonnektivität fordert foresight.js das entsprechende Bild zur Anzeige an.
4. Symbolschriftarten
Icon-Schriften sind einfach großartig, sie sind unendlich skalierbar, können in jede Farbe geändert werden, haben transparente Knockouts, ändern die Deckkraft, animieren mit CSS3 und vieles mehr! Es gibt eine ganze Reihe von kostenpflichtigen und Open-Source-Lösungen. Persönlich bevorzuge ich das Open-Source-Paket Font Awesome, es gibt derzeit über 220 Symbole, es kann absolut kostenlos für kommerzielle Zwecke verwendet werden und ist so verdammt einfach zu bedienen.
Also, worauf wartest Du? Beginnen Sie noch heute mit der Anwendung dieser Praktiken!