Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Responsive Webdesign – Grundlagen

Media Queries für hochauflösende Displays

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Besonders Icons sehen auf hochauflösenden Bildschirmen oft unscharf aus. Dem kann man mit den richtigen Media Queries abhelfen, um gezielt bessere Icons auszuliefern.

Transkript

Besonders Icons sehen auf hochauflösenden Displays oft schlecht aus. Hier kann man gezielt über Media Queries die Auflösung abfragen des Displays. Und dann besondere Icons als Hintergrundbilder für die hochauflösenden Bildschirme ausliefern lassen. Was braucht man dafür für Zutaten? Ich habe hier erstmal ein kleines Beispiel gebaut und verwende hier die Icons von jQuery Mobile. Und jQuery Mobile ist ja für mobile Geräte gemacht und die kümmern sich auch um die hochauflösenden Displays. Und das heißt, die haben ihre Icons in zwei Varianten. Die kleine Variante, sozusagen für normale Screens und die doppelt so große Variante für größere, also für hochauflösende Displays. Sie erkennen das hier an dem Namen. Man kann die ja ganz normal per CSS einbinden und die hier wären doppelt so groß, aber man kann dann mit background-size, dieser CSS 3 Eigenschaft, die auf die gewünschte normale Größe bringen, sodass jetzt hier im Beispiel beide Iconsätze gleich groß angezeigt werden. Jetzt müssen wir aber natürlich noch dafür sorgen, dass jeweils die richtigen Geräte auch das richtige Bild erhalten. Und dafür können wir Media Queries einsetzen. Und das wollen wir uns einmal ansehen hier. Ich habe jetzt hier auch schon ein Beispiel vorbereitet. Dafür habe ich zwei Bilder erstellt. Ein Bild hat die Größe 100x100 Pixel und das andere hat highres. im Namen, das ist auf die doppelte Größe erstellt, also 200 Pixel x 200 Pixel. Hier sehen Sie einmal die beiden Bilder. Das ist das Kleine, das ist 100x100. Und das andere ist 200x200. Sie sehen hier unten auch, ich habe dieses mal unterschiedliche Farben gemacht, damit wir ganz deutlich erkennen können welches Bild geladen ist. Im echten Einsatz würden die natürlich identisch aussehen, aber eben auf verschiedene Größen angelegt sein. Schauen wir uns dann an wie das Ganze funktioniert. Ich lasse hier zum Vergleich erst einmal das normale Icon einblenden. Ganz normal, und dann kommen jetzt hier diese Media Queries. Und innerhalb dieser Media Queries, wir schauen die gleich genauer an, frage ich ab, ob ich ein hochauflösendes Display habe. Und wenn das der Fall ist, dann lasse ich das andere Bild einbinden als Hintergrundbild und ich ändere es auf die Größe 100x100 Pixel. Das entspricht der Größe des normalen Icons. Schauen wir uns dann an wie diese Media Queries formuliert werden müssen. Für Webkit-Browser brauchen Sie die Angabe webkit-min-device-pixel-ratio. Diese erwartet das Verhältnis von Geräten zu CSS Pixel, beschreibt dieses Verhältnis und erwartet eine Kommazahl. Ich habe gesagt jetzt mindestens 1,5 in diesem Beispiel. Wenn Sie für ältere Firefox-Browser das auch angeben wollen würden, dann müssten Sie das auf diese etwas komische Art min--moz schreiben. Das heißt wirklich so, das ist jetzt hier kein Tippfehler. Kann man aber eigentlich auch weglassen, da der Firefox ab Version 16 auch schon die Standardvariante versteht. Die normale Standardvariante, die die meisten Browser dann verstehen, ist min-resolution. Das ist das was vom V3C dafür vorgesehen ist. Das Andere, Webkit, das ist eine Webkit-Erfindung. Und da verwende ich hier die Einheit dpi, also dots per inch. Dabei muss ich davon ausgehen, dass 1 inch 96 Pixel hat. Das heißt, ich muss diesen Faktor mal 96 nehmen, dann komme ich auf 144 dpi. In Zukunft werden wir die dots per Pixel nehmen können und dann können wir hier so einen Faktor angeben, der genau diesem hier entspricht. Das heißt, wir müssen das auf viererlei Arten machen, obwohl wir diese Variante könnten wir auch weglassen, das heißt auf drei verschiedene Arten sollten wir diese Abfrage machen. Und dann wird das wirklich nur von hochauflösenden Displays interpretiert. Man könnte natürlich hier auch vom anderen Faktor ausgehen. Und wichtig ist natürlich, dass sich die Größe des Bildes dann wieder auf die Standardgröße sätze. Sehen wir uns das einmal im Firefox an. Dann gibt es wenig Überraschung, es wird beides Mal natürlich das normale Icon angezeigt, denn hier habe ich gerade kein hochauflösendes Display. Sehen wir uns die Icons einmal auf einem hochauflösendem Display an. Und ich mache sie mal hier ein bisschen größer. Dann erkennt man, dass die normalen Icons leicht verschwommen wirken. Die für hochauflösende Displays erstellten Icons hingegen sind ganz scharf. Kommen wir zu dem anderen Beispiel, wo wir über Media Queries gesteuert immer das passende Icon anzeigen lassen. Im ersten Fall lassen wir das normale Icon einblenden. Und beim zweiten Fall unterscheiden wir über Media Queries, ob es ein hochauflösender Bildschirm ist oder nicht. Und wenn es ein hochauflösender Bildschirm ist, dann soll auch das entsprechende Icon angezeigt werden. Und das klappt hier auch, das hochauflösende Icon ist blau. Und Sie sehen auch wieder, wenn man das jetzt vergrößert, dann wird deutlich, dass bei den normalen Icons das leicht unscharf ist und bei den für hochauflösende Displays optimierten Icons ist es nicht der Fall.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!