CSS Media Queries - Beispiele
- Previous Page CSS Medienabfragen
- Next Page RWD Introduction
CSS Media Queries - Mehr Beispiele
Sehen wir uns mehr Beispiele für Media Queries an.
Media Queries sind eine beliebte Technologie, um angepasste Stile für verschiedene Geräte zu übermitteln.
Nachfolgend wird ein einfaches Beispiel gezeigt, um die Hintergrundfarbe verschiedener Geräte zu ändern:
Beispiel
/* Die Hintergrundfarbe des Bodys wird auf Karamellbraun gesetzt */
body {
background-color: tan;
}
/* Auf Bildschirmen mit einer Breite von 992 Pixel oder weniger wird die Hintergrundfarbe auf Blau gesetzt */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* Auf Bildschirmen mit 600 Pixel oder weniger wird die Hintergrundfarbe auf Olive gesetzt */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
Möchten Sie wissen, warum wir 992px und 600px präzise verwenden? Dies sind die sogenannten "typischen Breakpoints" (typical breakpoints) der Geräte. Sie finden diese in unseren Responsive Web Design Tutorial Lernen Sie mehr über typische Breakpoints im HTML.
Media Queries für das Menü
In diesem Beispiel verwenden wir Media Queries, um eine responsive Navigationsleiste zu erstellen, die bei verschiedenen Bildschirmgrößen unterschiedlich aussieht.
Großes Bildschirm:
Kleines Bildschirm:
Beispiel
/* Navbar-Container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar-Links */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Auf Bildschirmen mit einer Breite von 600 Pixel oder weniger, lassen Sie die Menülinks übereinander stapeln, anstatt nebeneinander zu sein */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Media Queries für Spalten
Eine häufige Anwendung von Media Queries ist die Erstellung eines flexiblen Layouts. In diesem Beispiel erstellen wir ein Layout, das zwischen vier Spalten, zwei Spalten und voller Breite wechselt, abhängig von verschiedenen Bildschirmgrößen:
Großes Bildschirm:
Mittleres Bildschirm:
Kleines Bildschirm:
Beispiel
/* Erstellen Sie vier gleiche Spalten, die nebeneinander schwimmend sind */
.column {
float: left;
width: 25%;
}
/* Auf Bildschirmen mit einer Breite von 992 Pixel oder weniger, von vier Spalten auf zwei Spalten wechseln */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* Auf Bildschirmen mit einer Breite von 600 Pixel oder weniger, lassen Sie die Spalten übereinander stapeln, anstatt nebeneinander zu sein */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Tip:eine modernere Methode zur Erstellung von Spaltenlayout mit CSS Flexbox (siehe untenstehendes Beispiel). Aber Internet Explorer 10 und frühere Versionen unterstützen es nicht. Wenn Unterstützung für IE6-10 erforderlich ist, verwenden Sie Float (wie oben gezeigt).
Um mehr über das Modul Flexbox-Layout zu erfahren, lernen Sie CSS Flexbox dieses Kapitel.
Um mehr über responsives Web-Design zu erfahren, lernen Sie unsere Responsive Web Design Tutorial.
Beispiel
/* Container des Flex-Box */
.row {
display: flex;
flex-wrap: wrap;
}
/* Erstellen Sie vier gleiche Spalten */
.column {
flex: 25%;
padding: 20px;
}
/* Auf Bildschirmen mit einer Breite von 992 Pixel oder weniger, von vier Spalten auf zwei Spalten wechseln */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* Auf Bildschirmen mit einer Breite von 600 Pixel oder weniger, lassen Sie die Spalten übereinander stapeln, anstatt nebeneinander zu sein */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
Elemente mit Media Queries verbergen
Eine weitere häufige Anwendung von Media Queries ist das Verbergen von Elementen auf verschiedenen Bildschirmgrößen:
Ich werde es auf kleinen Bildschirmen verstecken.
Beispiel
/* Wenn die Bildschirmgröße 600 Pixel oder kleiner ist, verstecken Sie das Element */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
Mit Medienabfragen die Schriftgröße ändern
Sie können auch Medienabfragen verwenden, um die Schriftgröße der Elemente auf verschiedenen Bildschirmgrößen zu ändern:
Veränderliche Schriftgröße.
Beispiel
/* Wenn die Bildschirmgröße über 600 Pixel liegt, setzen Sie die Schriftgröße des <div> auf 80 Pixel */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* Wenn die Bildschirmgröße 600px oder kleiner ist, setzen Sie die Schriftgröße des <div> auf 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Flexible Bildergalerie
In diesem Beispiel verwenden wir die Medienabfrage zusammen mit flexbox, um eine responsive Bildergalerie zu erstellen:
Beispiel
Flexible Website
In diesem Beispiel verwenden wir die Medienabfrage zusammen mit flexbox, um eine responsive Website zu erstellen, die eine flexible Navigationsleiste und flexible Inhalte enthält.
Beispiel
Richtung: Porträt / Landschaft
Media Queries können auch verwendet werden, um die Layout der Seite basierend auf der Richtung des Browsers zu ändern.
Sie können eine Gruppe von CSS-Attributen festlegen, die nur dann gelten, wenn die Breite des Browserfensters größer als die Höhe ist, das heißt, im Querformat:
Beispiel
Verwenden Sie einen hellblauen Hintergrund, wenn die Richtung im Querformat ist:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
Von der Mindestbreite zur Maximalbreite
Sie können auch die min-width- und max-width-Attribute verwenden, um die Mindest- und Maximalbreite zu setzen.
Zum Beispiel, wenn die Breite des Browsers zwischen 600 und 900 Pixeln liegt, ändern Sie das Aussehen des <div>-Elements:
Beispiel
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Verwendung von Zusatzwerten: In folgendem Beispiel fügen wir eine zusätzliche Medienabfrage durch Komma (ähnlich dem OR-Operator) zu einer bestehenden Medienabfrage hinzu:
Beispiel
/* Wenn die Breite zwischen 600 und 900 Pixeln liegt oder größer als 1100 Pixel ist, ändern Sie das Aussehen von <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
CSS @media Reference Manual
For a complete overview of all media types and properties/expressions, please see CSS Reference @media Rule.
Tip:For more knowledge about responsive web design (how to target different devices and screens) and using media query breakpoints, please read our Responsive Web Design Tutorial.
- Previous Page CSS Medienabfragen
- Next Page RWD Introduction
