kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Retina Media Queries / Media Query

Retina Media Queries

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

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;
    }
}

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.