CSS/Anwendung und Praxis/Tipps und Tricks für media queries

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Eine Stärke von CSS liegt darin, die Darstellung eines Dokuments mit Hilfe von Medienabfragen (media queries) je nach Ausgabemedium verschieden festlegen zu können. So können Sie im Druckbereich von der normalen Bildschirmansicht abweichende Formatierungen festlegen. Ihre volle Stärke entfalten Media Queries mit Hilfe von Medienmerkmalen, mit denen Sie z.B. unterschiedliche Viewport-Breiten berücksichtigen können.

In diesem Artikel lernen Sie die optimale Vorgehensweise sowie einige Tipps und Tricks aus der Praxis.[1]

Breakpoints: Inhalt über Design[Bearbeiten]

Für welche Geräte muss ich wann Breakpoints setzen?

So oder ähnlich lauten viele Fragen im Forum. Die Antwort darauf lautet: "Gar nicht!"

Derzeit aktuelle Geräteauflösungen können morgen schon überholt sein. Richten Sie lieber die Breakpoints am Inhalt aus:

  • Überlegen sie sich, ab wann dieser bei einer bestimmten Viewportbreite nicht mehr gut aussieht.
  • Bei Text ist es eigentlich egal, höchstens ein max-width: 60em;, damit die Zeilen nicht zu lang werden.
  • Bei Grafiken und bestimmten Seitenelementen sollten Sie flexible, prozentuale Breiten verwenden, damit Bilder
    • auf schmalen Bildschirmen 100% breit dargestellt werden
    • auf Tablets in landscape-Modus nebeneinander oder
    • auf breiten Bildschirmen drei oder vier nebeneinander dargestellt werden.

Hierbei gibt es zwei Ansätze:

Desktop first[Bearbeiten]

Erstellen Sie die Seite, schieben Sie Ihr Browserfenster zusammen und fügen Sie dort Media Queries ein, wo Ihnen das Layout um die Ohren fliegt. Das nennt sich Desktop-First.

Beispiel: umständliche Vorgehensweise mit Desktop first!
aside {
  float: left;
  width: 50%;
}

@media (max-width: 50em) {
  aside {
    float: none;
    width: auto;
  }
}

Mobile first[Bearbeiten]

Alternativ ziehen Sie das Browserfenster eng zusammen und erstellen die Seite. In einem zweiten Schritt ziehen Sie das Fenster auseinander und fügen Media Queries dort ein, wo die zusätzliche Breite sie sinnvoll machen. Das nennt sich dann Mobile-First.

Designing for mobile first forces you to embrace these contraints to develop an elegant mobile-appropriate solution. But the benefits go well beyond mobile. Small screen sizes force you to prioritize what really matters to your customers and business.

Luke Wroblewski, Mobile First[2]

Luke W. betont, dass dieser Ansatz Webentwickler dazu zwingt, elegante Lösungen für mobile Geräte zu entwickeln, sich aber auch bei großen Viewports auf das Wesentliche zu konzentrieren.

Beispiel: empfehlenswerte Vorgehensweise mit Mobile first!
aside {
  /* nur Farb- und Hintergrundformatierungen */
}

@media (min-width: 50em) {
  aside {
    float: left;
    width: 50%;
  }
}


Empfehlung:
Verwenden Sie den Mobile first! -Ansatz.
Dieser ist (wie in den oberen Beispielen ersichtlich) kürzer und ermöglicht einen übersichtlicheren Aufbau der Webseite.

relative Größen[Bearbeiten]

Ein wie eingangs erwähntes Konzentrieren auf die Auflösungen bestimmter Geräte führt zu einer mangelnden Flexibilität, da User durch strg + + oder ein Fingerauseinanderziehen die Schriftgröße einer Seite verändern können. Dies führt bei festen Größen, die schlimmstenfalls sogar noch in Pixeln angegeben sind, zu einem zerschossenen Layout.[3] Zell Liew hat dies getestet und in einem anschaulichen Artikel PX, EM or REM Media Queries? verarbeitet.[4]

Beispiel
/* Mobile first */

nav li {
  display: block;
}

@media (min-width: 35em) { 
  /* Festlegungen */ 
  nav li {
    display: block;
    width: 50%;
  }

@media (min-width: 50em) { 
  nav li {
    display: inline;
    width: 50%;
  }
}
In einem ersten Block werden Formatfestlegungen der einzelnen Elemente ohne Breitenangaben notiert. Dadurch dehnen sie sich komplett über den verfügbaren Raum aus.

Ab einer Breite von 35em, was nicht nur von der absoluten Breite des Viewports, sondern auch der vom Benutzer eingestellten Schriftgröße abhängt, werden manche Inhalte, wie z.b. die einzelnen Links der Navigation in zwei Spalten dargestellt.

Ab einer Breite von 50em könnte man dann alle Links nebeneinander darstellen.


Empfehlung:
Um benutzereigene (Schrift-)Größenänderungen zu berücksichtigen, sollten Sie
  • relative Schriftgrößen wie em oder rem
  • das Medienmerkmal width anstelle des starren device-width
verwenden.[5]

min-width vs. max-width[Bearbeiten]

Wierum Sie media queries verwenden, hängt auch von der Defaultdarstellung in Browsern ab. Blöcke (section, article, div etc.) werden untereinander dargestellt – so wie man es für kleine Viewports haben möchte. Wenn Sie auf größeren Viewports Blöcke nebeneinander haben möchten, dann ändern Sie das Defaultverhalten nur für größere Viewports – mit @media (min-width: …).

Für responsive Tabellen bspw. wäre es aber unsinnig, erst

table, caption, colgroup, col, thead, tbody, tfoot, tr, th, td { display: block }

zu setzen und dann mit

Beispiel
@media (min-width: )
{
  table    { display: table }
  caption  { display: table-caption }
  colgroup { display: table-column-group }
  col      { display: table-column }
  thead    { display: table-header-group }
  tbody    { display: table-row-group }
  tfoot    { display: table-footer-group }
  tr       { display: table-row }
  th, td   { display: table-cell }
}

mühsam den Ursprungszustand wiederherzustellen.

Stattdessen ändern Sie die Defaultdarstellung eben nur für kleine Viewports – mit max-width:

Beispiel
@media (max-width: )
{
  table, caption, colgroup, col, thead, tbody, tfoot, tr, th, td { diplay: block }
}

So stehen dann @media (min-width: …)- und @media (max-width: …)-Regeln in friedlicher Koexistenz im selben Stylesheet.[6]

ultraweite Breakpoints[Bearbeiten]

Die Monitore auf den Schreibtischen und bei Home Entertainment Systemen an der Wand werden immer größer und größer und ein Ende der Entwicklung ist nicht abzusehen.

Anstelle von ultraweiten Breakpoints empfiehlt es sich hier einfach eine maximale Breite anzugeben.

Beispiel: maximale Breite bei sehr großen Bildschirmen
#container {
    margin: 0 auto;
    max-width: 100em; 
}

weitere Medienmerkmale[Bearbeiten]

Pixeldichte[Bearbeiten]

Gerade bei großen Monitore ist nicht nur die Auflösung, sondern auch die Pixeldichte entscheidend für die perfekte Darstellung[7]. Natürlich können Sie diese ebenfalls per Medienmerkmal abfragen:


Beispiel: Pixeldichte
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specifische Angaben */
}
Das Medienmerkmal resolution überprüft, welche Pixeldichte der Bildschirm hat. Ein Anwendungsfall wären Hintergrundbilder, die auf hochauflösenden Bildschirmen zweimal geladen würden.


Empfehlung: Verwenden Sie das proprietäre Medienmerkmal device-pixel-ratio nur als Fallback.

Metaangaben[Bearbeiten]

Beachten Sie: Häufig werden Sie Media Queries dafür verwenden wollen, um auf verschiedene Breiten der Ausgabebildschirme reagieren zu können. Damit die Webseite sowohl in einem schmalen Browserfenster des Desktop-PCs als auch auf dem Smartphone oder Laptop wunschgemäß dargestellt wird, müssen Sie mithilfe eines meta-Elements dafür sorgen, dass sich die Seite an den Viewport anpasst. Notieren Sie dazu folgende Zeile im head der Seite:
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
Für weitere Erklärungen siehe HTML/Kopfdaten/meta#Viewport_einstellen.

Inhalte mit Media Queries beeinflussen[Bearbeiten]

Für Webentwickler ist die Versuchung groß, eine Webseite an einem großen Bildschirm zu entwickeln und den verfügbaren Raum zusätzlich zum Hauptinhalt mit weiteren, eigentlich aber nicht notwendigen Inhalten zu füllen. Es ist sinnvoll, auf einer mobilen Seite mit kleinem Viewport, geringeren Datenübertragungsraten und Volumensbegrenzungen nur die eigentlichen Inhalte anzuzeigen.

Während es früher sehr schwierig war, durch Conditional Comments, Auslesen der User-Agent-Kennung oder ein Auslesen von innerHeight Geräte zu erkennen, können Sie heute Media Queries auch in JavaScript einsetzen.

Die matchMedia()-Methode ermöglicht es bequem Medienmerkmale abzufragen und dann z. B. passend zusätzliche Inhalte nachzuladen.


Beispiel
if (window.matchMedia("(min-width: 35em)").matches) {
  /* Der Viewport ist mindestens 35em breit */
} else {
  /* Das Medienmerkmal trifft nicht zu, alle anderen Viewports */
}
Beachten Sie: Eine weitere Abfrage, ob anstelle von :hover touch Events verwendet werden sollen, ist keine Frage der Bildschirmabmessungen. Es gibt auch 27-Zoll-Touchgeräte sowie kleine Bildschirme mit Tastaturbedienung.

Quellen[Bearbeiten]

  1. Grundlage für diesen Artikel ist dieser Thread im Self-Forum
  2. Luke W: Mobile First
  3. creativebloq: Determining breakpoints for a responsive design
  4. Zell Liew: PX, EM or REM Media Queries?
  5. sitepoint: Media Queries: Width vs. Device Width
  6. Selfhtml-Forum: min-width vs. max-width von Gunnar Bittersmann
  7. css-tricks: Retina Display Media Query

Weblinks[Bearbeiten]

siehe auch[Bearbeiten]