Responsives Webdesign -Media Queries
Media Queries werden in CSS3 eingeführt:CSS3 @media Queries。
Mit @media-Abfragen können Sie unterschiedliche Stile für unterschiedliche Medientypen definieren.
Beispiel
Wenn das Browserfenster kleiner als 500px ist, wird der Hintergrund hellblau:
body {
background-color: lightblue;
}
}
Selbst ausprobieren »
Breakpoints hinzufügen
Im vorherigen Tutorial haben wir Zeilen und Spalten verwendet, um Webseiten zu erstellen. Sie sind responsiv, aber auf kleinen Bildschirmen werden sie nicht gut angezeigt.
Media Queries können uns helfen, dieses Problem zu lösen. Wir können Breakpoints in der Mitte des Designs hinzufügen, und verschiedene Breakpoints haben unterschiedliche Auswirkungen.
Desktop-Geräte
Mobile Geräte
Verwenden Sie eine Media Query, um einen Breakpoint bei 768px hinzuzufügen:
Beispiel
Wenn der Bildschirm (Browserfenster) kleiner als 768px ist, beträgt die Breite jeder Spalte 100%:
.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%;
}
}
Selbst ausprobieren »
Mobile-First-Design
Mobile-First bedeutet, das Design für Mobilgeräte zu priorisieren, wenn man für Desktop und andere Geräte entwirft.
Das bedeutet, wir müssen einige Änderungen am CSS vornehmen.
Wir ändern Styles, wenn der Bildschirm kleiner als 768px ist, und müssen außerdem Styles ändern, wenn die Bildschirmbreite größer als 768px ist. Hier ist ein Mobile-First-Beispiel:
[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%;}
}
Weitere Breakpoints
Sie können Breakpoints nach Ihren Bedürfnissen hinzufügen.
Wir können auch Breakpoints für Tablet-Geräte und Mobiltelefone festlegen.
Desktop-Geräte
Tablet-Geräte
Mobile Geräte
Fügen Sie eine Media Query hinzu, wenn der Bildschirm 600px beträgt, und legen Sie neue Stile fest (Bildschirm größer als 600px, aber kleiner als 768px):
Beispiel
Beachten Sie, dass die beiden Sätze von Klassenstilen identisch sind, aber die Namen unterschiedlich sind (col- und col-m-):
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* Für Tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-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%;}
}
Selbst ausprobieren »
Der obige Code wirkt redundant, kann aber automatisch je nach Bildschirmgröße unterschiedliche Stile festlegen, daher ist er nach wie vor sehr notwendig.
HTML-Beispiele
Für Desktop-Geräte:
Der erste und der dritte Abschnitt erstrecken sich über 3 Spalten. Der mittlere Abschnitt erstreckt sich über 6 Spalten.
Für Tablet-Geräte:
Der erste erstreckt sich über 3 Spalten, der zweite Abschnitt erstreckt sich über 9 Spalten und der dritte erstreckt sich über 12 Spalten:
<div class="col-3 col-m-3">...</div>
<div class="col-6 col-m-9">...</div>
<div class="col-3 col-m-12">...</div>
</div>
Ausrichtung: Querformat/Hochformat
In Kombination mit CSS-Medienabfragen können Layouts erstellt werden, die sich an die Ausrichtung verschiedener Geräte anpassen (Querformat, Hochformat usw.).
Syntax:
orientation：portrait | landscape
- portrait：Gibt an, dass die Höhe des sichtbaren Seitenbereichs im Ausgabegerät größer oder gleich der Breite ist.
- landscape：Mit Ausnahme des Werts portrait sind alle landscape.
Beispiel
Wenn die Ausrichtung Querformat ist, wird der Hintergrund hellblau:
body {
background-color: lightblue;
}
}
Selbst ausprobieren »