Responsives Webdesign - Medienanfragen
Was ist eine Medienabfrage?
Media Query ist eine CSS-Technik, die in CSS3 eingeführt wurde.
Es verwendet die @mediaRegel, um einen Block von CSS-Eigenschaften nur einzuschließen, wenn eine bestimmte Bedingung wahr ist.
Beispiel
Wenn das Browserfenster 600 Pixel oder kleiner ist, ist die Hintergrundfarbe hellblau:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Haltepunkt hinzufügen
Zu Beginn dieses Tutorials haben wir eine Webseite mit Zeilen und Spalten erstellt, die responsive war, aber auf einem kleinen Bildschirm nicht gut aussah.
Medienanfragen können dabei helfen. Wir können einen Haltepunkt hinzufügen, an dem sich bestimmte Teile des Designs auf jeder Seite des Haltepunkts unterschiedlich verhalten.
Schreibtisch
Telefon
Verwenden Sie eine Medienabfrage, um einen Haltepunkt bei 768 Pixel hinzuzufügen:
Beispiel
Wenn der Bildschirm (Browserfenster) kleiner als 768 Pixel wird, sollte jede Spalte eine Breite von 100 % haben:
/* For 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%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Entwerfen Sie immer zuerst für Mobilgeräte
Mobile First bedeutet, dass Sie zuerst für Mobilgeräte entwerfen, bevor Sie für Desktops oder andere Geräte entwerfen (dadurch wird die Seite auf kleineren Geräten schneller angezeigt).
Das bedeutet, dass wir einige Änderungen in unserem CSS vornehmen müssen.
Anstatt den Stil zu ändern, wenn die Breite kleiner als 768 Pixel wird, sollten wir das Design ändern, wenn die Breite größer als 768 Pixel wird. Dadurch wird unser Design Mobile First:
Beispiel
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For 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%;}
}
Ein weiterer Haltepunkt
Sie können beliebig viele Haltepunkte hinzufügen.
Wir werden auch einen Haltepunkt zwischen Tablets und Mobiltelefonen einfügen.
Schreibtisch
Tablette
Telefon
Wir tun dies, indem wir eine weitere Medienabfrage (bei 600 Pixel) und eine Reihe neuer Klassen für Geräte hinzufügen, die größer als 600 Pixel (aber kleiner als 768 Pixel) sind:
Beispiel
Beachten Sie, dass die beiden Klassensätze fast identisch sind, der einzige Unterschied ist der Name ( col-und col-s-):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For 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) {
/* For 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%;}
}
Es mag seltsam erscheinen, dass wir zwei Sätze identischer Klassen haben, aber es gibt uns die Möglichkeit , in HTML zu entscheiden, was mit den Spalten an jedem Haltepunkt passieren soll:
HTML-Beispiel
Für Desktop:
Der erste und der dritte Abschnitt umfassen jeweils 3 Spalten. Der Mittelteil erstreckt sich über 6 Spalten.
Für Tabletten:
Der erste Abschnitt erstreckt sich über 3 Spalten, der zweite über 9 und der dritte Abschnitt wird unter den ersten beiden Abschnitten angezeigt und umfasst 12 Spalten:
<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>
Typische Geräte-Haltepunkte
Es gibt unzählige Bildschirme und Geräte mit unterschiedlichen Höhen und Breiten, daher ist es schwierig, einen genauen Haltepunkt für jedes Gerät zu erstellen. Um die Dinge einfach zu halten, könnten Sie fünf Gruppen ansprechen:
Beispiel
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
Ausrichtung: Hochformat / Querformat
Medienabfragen können auch verwendet werden, um das Layout einer Seite abhängig von der Ausrichtung des Browsers zu ändern.
Sie können eine Reihe von CSS-Eigenschaften haben, die nur gelten, wenn das Browserfenster breiter als seine Höhe ist, eine sogenannte „Querformat“-Ausrichtung:
Beispiel
Die Webseite hat einen hellblauen Hintergrund, wenn die Ausrichtung im Querformat ist:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Elemente mit Medienabfragen ausblenden
Eine weitere häufige Verwendung von Medienabfragen ist das Ausblenden von Elementen auf verschiedenen Bildschirmgrößen:
Beispiel
/* If the screen size is 600px wide or less, hide the element */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Ändern Sie die Schriftgröße mit Medienabfragen
Sie können Medienabfragen auch verwenden, um die Schriftgröße eines Elements auf verschiedenen Bildschirmgrößen zu ändern:
Variable Schriftgröße.
Beispiel
/* If the screen size is 601px or
more, set the font-size of <div> to 80px */
@media only screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or
less,
set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
CSS @media-Referenz
Einen vollständigen Überblick über alle Medientypen und Funktionen/Ausdrücke finden Sie in der @media-Regel in unserer CSS-Referenz .