Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Wenn ihr die Gestaltung eurer Website für hochauflösende Displays optimieren möchtet, führt einer der unkompliziertesten Wege über spezielle Media Queries. Zunächst fragt ihr mit Hilfe des entsprechenden Media Query die Displayauflösung ab, anschließend werden hochauflösende Grafiken nachgeladen. Leider ist der Syntax für Android und iOS nicht einheitlich. Aus diesem Grund archiviere ich in diesem Beitrag die notwendigen Code-Snippets.

Media Queries für hochauflösende Displays

Je nach Display-Auflösung gelten unterschiedliche Media Queries. Ihr müsst selbst entscheiden ab welcher Pixeldichte ihr hochauflösende Grafiken bereitstellt. Eine hilfreiche Übersicht über die verschiedenen Displays und die jeweiligen technischen Daten findet ihr hier. Das nachfolgende Beispiel tauscht Grafiken ab einer Pixeldichte von 200% aus.

Verschiedene Einheiten

Die Angabe min-device-pixel-ratio steht für das Verhältnis von CSS-Pixeln zu Gerätepixeln (Device-Pixel-Ratio) und wurde von Apple eingeführt. Diese Angabe ist für iOS notwendig.
Die Angabe in dpi (Dots per Inch) wird für alle anderen Browser benutzt. Da die Angabe in dpi bei Displays allerdings etwas irreführend ist, lautet der neue Standard dppxDots per Pixel.

@media
  screen and (-webkit-min-device-pixel-ratio: 2),
  screen and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {

/* CSS Code für hochauflösende Displays */

}

Beispiel anzeigen

Grafiken auf Retina-Displays austauschen

Das folgende Beispiel zeigt einen <div> dem über CSS ein Hintergrundbild zugewiesen wurde. Mit zwei Breakpoints bei 600 und 1000 Pixeln wird das Bild auf Tablets sowie auf Desktop-Computern ausgetauscht. Mit drei weiteren Media Queries werden die Grafiken für Retina-Displays bereitgestellt.

div {
  background: url(smartphone.jpg);
}

@media screen and (min-width:600px) {
  div {background:url(tablet.jpg);}
}

@media screen and (min-width:1000px) {
  div {background:url(desktop.jpg);}
}

/* hochauflösend */

@media
  screen and (-webkit-min-device-pixel-ratio: 2),
  screen and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {

  div {background:url(smartphone@2x.jpg);}
}

@media
  screen and (min-width:600px) and (-webkit-min-device-pixel-ratio: 2),
  screen and (min-width:600px) and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {

  div {background:url(tablet@2x.jpg);}
}

@media
  screen and (min-width:1000px) and (-webkit-min-device-pixel-ratio: 2),
  screen and (min-width:1000px) and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {

  div {background:url(desktop@2x.jpg);}
}

Sass-Mixin für Retina Media Queries

Wenn ihr mit Sass arbeitet, hilft euch vielleicht folgendes Mixin weiter.

// Mixin definieren
@mixin retina {
  @media 
  screen and (-webkit-min-device-pixel-ratio: 2), 
  screen and (min-resolution: 192dpi), 
  screen and (min-resolution: 2dppx) {
    @content;
  }
}

// Mixin anwenden
div {
  width:200px;
  height:100px;
  background-image:url(img/bild.png);

  @include retina {
    background-image:url(img/bild@2x.png);
    background-size: 200px 100px;
  }
}

Der SCSS-Code kompiliert zu:

div {
  width: 200px;
  height: 100px;
  background-image: url(img/bild.png);
}

@media 
  screen and (-webkit-min-device-pixel-ratio: 2), 
  screen and (min-resolution: 192dpi), 
  screen and (min-resolution: 2dppx) {

    div {
      background-image: url(img/bild@2x.png);
      background-size: 200px 100px;
    }
}

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →