Responsive Webdesign - Medienabfragen

Was sind Medienabfragen?

Medienabfragen sind eine CSS-Technologie, die in CSS3 eingeführt wurde.

wird nur verwendet, wenn bestimmte Bedingungen erfüllt sind @media Regeln, um CSS-Attributblöcke zu referenzieren.

Beispiel

Wenn das Browserfenster 600px oder kleiner ist, sollte die Hintergrundfarbe ein helles Blau sein:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Probieren Sie es selbst aus

Bruchpunkte hinzufügen

In einem früheren Teil dieses Tutorials haben wir eine Webseite mit Zeilen und Spalten erstellt, aber diese responsive Webseite sah auf kleinen Bildschirmen nicht gut aus.

Medienabfragen können Ihnen helfen. Wir können einen Bruchpunkt hinzufügen, bei dem bestimmte Teile des Designs auf jeder Seite des Bruchpunkts unterschiedlich verhalten.


Desktop-Computer

Handy

Fügen Sie einen Bruchpunkt bei 768px mit Medienabfragen hinzu:

Beispiel

Wenn die Bildschirmbreite (Browserfenster) weniger als 768px beträgt, sollte die Breite jeder Spalte 100% betragen:

/* Für Desktop-Geräte: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
  /* Für Mobiltelefone: */
  [class*="col-"] {
    width: 100%;
  }
}

Probieren Sie es selbst aus

Immer mobile First Design

Mobile First (Mobile First) bedeutet, dass wir vor der Gestaltung für Desktops oder anderen Geräten zuerst für mobile Geräte gestalten (dies macht die Seite schneller auf kleineren Geräten anzuzeigen).

Das bedeutet, dass wir einige Verbesserungen im CSS vornehmen müssen.

Wenn die Breite weniger als 768px beträgt, sollten wir das Design ändern, anstatt die Breite zu ändern. So haben wir ein 'Mobile First'-Design erstellt:

Beispiel

/* Für Mobiltelefone: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  /* Für den Desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

Probieren Sie es selbst aus

Ein weiterer Bruchpunkt

Sie können so viele Bruchpunkte hinzufügen, wie Sie möchten.

Wir fügen auch einen Bruchpunkt zwischen Tablet und Handy ein.


Desktop-Computer

Tablet

Handy

Daher haben wir einen Medienabfrage (bei 600 Pixel) hinzugefügt und eine neue Klasse für Geräte mit einer Auflösung von mehr als 600 Pixeln (aber weniger als 768 Pixeln) hinzugefügt:

Beispiel

Bitte beachten Sie, dass die beiden Klassen fast identisch sind, der einzige Unterschied ist der Name (col- und col-s-):

/* Für Mobiltelefone: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* Für Tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* Für den Desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

Zwei gleiche Klassen zu haben, scheint seltsam zu sein, aber es gibt uns die Möglichkeit, mit HTML zu bestimmen, was mit den Spalten an jedem Breakpoint passiert:

HTML-Beispiel

Für Desktop-Computer:

Der erste und der dritte Teil werden 3 Spalten überschreiten. Der mittlere Teil wird 6 Spalten überschreiten.

Für Tablets:

Der erste Teil wird 3 Spalten überschreiten, der zweite Teil wird 9 Spalten überschreiten, und der dritte Teil wird unter den ersten beiden Teilen angezeigt und wird 12 Spalten überschreiten:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

Probieren Sie es selbst aus

Typische Gerätetrennpunkte

Es gibt unzählige Bildschirme und Geräte mit verschiedenen Höhen und Breiten, daher ist es schwierig, präzise Breakpoints für jedes Gerät zu erstellen. Aus Gründen der Einfachheit können Sie diese fünf Gruppen anvisieren:

Beispiel

/* Ultrakleine Geräte (Telefon, 600px und weniger) */
@media only screen and (max-width: 600px) {...} 
/* Kleine Geräte (Längsflächige Tablets und große Handys, 600 Pixel und mehr) */
@media only screen and (min-width: 600px) {...} 
/* Mittlere Geräte (Längsflächige Tablets, 768 Pixel und mehr) */
@media only screen and (min-width: 768px) {...} 
/* Große Geräte (Laptops/Desktop-Computer, 992px und mehr) */
@media only screen and (min-width: 992px) {...} 
/* Übergroße Geräte (große Laptops und Desktop-Computer, 1200px und mehr) */
@media only screen and (min-width: 1200px) {...}

Probieren Sie es selbst aus

Richtung: Portrait / Landschaft

Medienabfragen können auch verwendet werden, um das Layout der Seite basierend auf der Richtung des Browsers zu ändern.

Sie können eine Gruppe von CSS-Eigenschaften setzen, die nur dann gelten, wenn die Breite des Browserfensters größer als die Höhe ist, was als 'Quermodus' bezeichnet wird:

Beispiel

Wenn der Bildschirm in Quermodus (Landschaftsmodus) ist, ist die Hintergrundfarbe der Webseite hellblau:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Probieren Sie es selbst aus

Elemente mit Medienabfrage verbergen

Eine weitere häufige Anwendung von Medienabfragen ist das Verbergen von Elementen bei verschiedenen Bildschirmgrößen:

Beispiel

/* Wenn die Bildschirmgröße 600 Pixel oder kleiner ist, verstecken Sie dieses Element */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Probieren Sie es selbst aus

Schriftgröße mit Medienabfrage ändern

Sie können auch Medienabfragen verwenden, um die Schriftgröße der Elemente bei verschiedenen Bildschirmgrößen zu ändern:

Beispiel

/* Wenn die Bildschirmgröße 601px oder größer ist, setzen Sie bitte die font-size des <div> auf 80px */
@media only screen and (min-width: 601px) {}}
  div.example {
    font-size: 80px;
  }
}
/* Wenn der Bildschirmgröße 600px oder kleiner ist, setzen Sie die font-size des <div> auf 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Probieren Sie es selbst aus

CSS @media Referenzhandbuch

Für eine vollständige Übersicht über alle Mediendaten und Eigenschaften/ Ausdrücke, bitte siehe CSS Referenzhandbuch: @media Regel lesen.