Media Querys (Responsive Design)

Responsive: passt sich an, reagiert auf etwas - hier auf Eigenschaften des Gerätes auf dem die Website ausgegeben wird

 

 

 

Websites werden auf den verschiedensten Medien ausgegeben. Je nach Medium werden verschiedene Darstellungsoptimierungen benötigt. Deshalb gibt  es in CSS die Möglichkeit Eigenschaften des Ausgabegerätes abzufragen.

Mit Media Queries.

/* Die Regeln in diesem Block gelten
     nur für Bildschirme die höchstens 800px breit sind */

@media screen and (max-width: 800px){
     p{
        font-size: 1em;
     }
}

Es gibt verschiedenste Media Queries: man kann Styles speziell für den Druck eines Webdokuments definieren, Styles in Abhängigkeit von Farbraum, Pixeldichte (Auflösung) oder Orientierung (Hochkant oder Querformat) eines Endgeräts. Höhe, Breite und Seitenverhältnis eines Ausgabefenstes können abgefragt werden.

Ein vollständiger Übersichtsartikel bei MDN (EN)

Organisation bei der Arbeit mit Media Queries

Meistens wird das CSS für eine Bildschirmgrösse fertiggestellt und danach in mehreren Media-Query-Blöcken diejenigen Eigenschaften überschrieben die für andere Bildschirmgrössen anders definiert werden.

Mobile First

Arbeitet man mit dem Mobile-First-Ansatz, so notiert man erst das CSS für Mobile-Geräte und danach die Styles für grössere Bildschirme.

/* Styles für Smartphones */
/* ... */

@media screen and (min-width: 600px){
/* Die Regeln in diesem Block gelten
    nur für Bildschirme die mindestens 600px breit sind */
    /* ... */

@media screen and (min-width: 960px){
/* Die Regeln in diesem Block gelten
    nur für Bildschirme die mindestens 960px breit sind */
    /* ... */
  }
}/* Weitere Media-Query-Blöcke */

Desktop First

Hat man bereits ein Desktop-Design, so wird man das Layout Stück für Stück für kleinere Bildschirme anpassen wollen.

/* Styles die auf dem grossen Arbeitsrechner gut aussehen */
/* ... */
@media screen and (max-width: 1000px){
/* Die Regeln in diesem Block gelten
    nur für Geräte/Browserfenster die kleiner oder gleich 1000px breit sind */
    /* ... */

@media screen and (max-width: 700px){
    /* ... */
}

@media screen and (max-width: 480px){
    /* ... */
}/* Weitere Media-Query-Blöcke */

Welche Breakpoints?

Bei welcher Anzahl Pixel soll sich das Layoutkonzept ändern? Wie viele solcher Brüche sind sinnvoll? Das sind Design-Entscheidungen die von Inhalt und dessen Gestaltung abhängen.

Aus organisatorischen Gründen arbeiten manche Teams mit beispielsweise 4 Bildschirmgrössen ("so sieht es auf dem Mobile aus, so auf Tablet, so auf kleinen Desktop-Bildschirmen, so auf grossen Bildschirmen").

Empfehlenwert ist allerdings, die Entscheidung für einen Designbruch/Breakpoint für jeden Inhaltsblock zu treffen. Man kann gut und gerne eine Media Query schreiben, in der nur Styles für einen Inhaltsblock überschrieben werden.

Der folgende Code ist legitimer guter Code:

@media screen and (max-width: 900px){
/* Unter 900 Pixeln Bildschirmbreite  sieht die vierspaltige Produktansicht nicht mehr gut aus, deshalb ab hier anderes  Layout */
    .produkte{ ... }

@media screen and (max-width: 840px){
/* Unter  840 Pixeln Bildschirmbreite wirken die Team-Mitglieder zu klein: */
    .team{ ... }
}