CSS - Media Queries: Ein Anfängerguide

Hallo, zukünftige Webentwickler! Heute tauchen wir in die aufregende Welt der CSS Media Queries ein. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich auf dieser Reise Schritt für Schritt zu führen. Keine Sorge, wenn du noch nie kodiert hast – wir beginnen bei den Grundlagen und arbeiten uns nach oben. Also hole dir eine Tasse Kaffee (oder Tee, wenn das dein Ding ist) und los geht's!

Was sind Media Queries?

Bevor wir ins Detail gehen, lassen Sie uns verstehen, was Media Queries sind. Stell dir vor, du gestaltest eine Website, die auf deinem Computer großartig aussieht. Aber was passiert, wenn jemand sie auf seinem Handy ansieht? Genau hier kommen Media Queries ins Spiel! Sie ermöglichen es deiner Website, sich an verschiedene Bildschirmgrößen und Geräte anzupassen. Es ist, als hättest du eine Chamäleon-Website, die ihr Erscheinungsbild basierend auf ihrer Umgebung ändert.

Syntax

Nun schauen wir uns die grundlegende Syntax einer Media Query an:

@media medientyp and (bedingung) {
/* CSS-Regeln kommen hier hin */
}

Lass dich nicht davon abschrecken! Wir werden es auseinandernehmen:

• @media: Das tells the browser, "Hey, ich bin dabei, einige Bedingungen zu setzen!"
• medientyp: Das spezifiziert, welche Art von Medium wir ansprechen (wir werden diese gleich behandeln).
• and: Das ist, wie wir Bedingungen kombinieren.
• (bedingung): Das ist, wo wir unsere spezifischen Bedingungen setzen.

Medientypen

Medientypen sagen dem Browser, auf welches Gerät wir zielen. Hier sind die wichtigsten:

Medientyp	Beschreibung
all	Gültig für alle Geräte
print	Für Drucker
screen	Für Computerbildschirme, Tablets und Smartphones

Logische Operatoren

Wir können logische Operatoren verwenden, um komplexere Abfragen zu erstellen:

Operator	Beschreibung
and	Kombiniert mehrere Medieneigenschaften
not	Negiert eine Media Query
only	Applies styles only if the entire query matches
,	Kombiniert mehrere Media Queries

CSS Medientyp - All

Der all Medientyp ist wie ein Schweizer Army Knife – er funktioniert für alle Geräte. Hier ist ein Beispiel:

@media all {
body {
background-color: lightblue;
}
}

Dies setzt die Hintergrundfarbe auf Hellblau für alle Geräte. Einfach, oder?

CSS Medientyp - Print

Der print Medientyp ist perfekt zum Styling deiner Webseiten, wenn jemand sie ausdrucken möchte. Sehen wir es in Aktion:

@media print {
body {
font-size: 12pt;
}
.no-print {
display: none;
}
}

Dies erhöht die Schriftgröße für bessere Lesbarkeit und blendet Elemente mit der Klasse no-print beim Drucken aus.

CSS Medientyp - Screen

Der screen Medientyp ist wahrscheinlich der, den du am häufigsten verwenden wirst. Er ist für jedes bildschirmbasierte Gerät. Hier ist ein Beispiel:

@media screen and (max-width: 600px) {
.menu {
width: 100%;
}
}

Dies lässt das Menü die volle Breite des Bildschirms einnehmen, wenn die Bildschirmbreite 600 Pixel oder weniger beträgt.

CSS Medientyp - Mit Komma

Wir können mehrere Medientypen mit Kommas ansprechen. Es ist, als бы wir mehrere Freunde zu einer Party einladen:

@media screen, print {
body {
line-height: 1.5;
}
}

Dies setzt die Zeilenhöhe für beide Bildschirm- und Druckmedientypen.

CSS Medientyp - Mit Only

Das only Schlüsselwort ist wie ein Türsteher in einem Club. Es stellt sicher, dass ältere Browser, die keine Media Queries unterstützen, die Stile nicht anwenden:

@media only screen and (max-width: 600px) {
.container {
width: 100%;
}
}

CSS Media Queries - Bereich

Wir können auch Bereiche für unsere Bedingungen angeben:

@media screen and (min-width: 600px) and (max-width: 900px) {
.sidebar {
display: none;
}
}

Dies blendet die Seitenleiste aus, wenn die Bildschirmbreite zwischen 600px und 900px liegt.

Medieneigenschaften

Medieneigenschaften ermöglichen es uns, spezifische Merkmale des Benutzers Geräts oder Browsers zu testen. Hier sind einige häufige:

Eigenschaft	Beschreibung
width	Breite der Ansicht
height	Höhe der Ansicht
aspect-ratio	Verhältnis von Breite zu Höhe
orientation	Landscape oder Portrait
resolution	Pixeldichte des Geräts

Erstellen einer komplexen Media Query

Lassen Sie uns all dies mit einem komplexeren Beispiel kombinieren:

@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
.grid {
display: flex;
flex-wrap: wrap;
}
.grid-item {
width: 50%;
}
}

Dies erstellt ein Zwei-Spalten-Layout für landscape-orientierte Bildschirme zwischen 600px und 900px Breite.

CSS Media Queries - Kombinieren mehrerer Typen oder Eigenschaften

Wir können mehrere Typen oder Eigenschaften mit dem and Operator kombinieren:

@media screen and (min-width: 600px) and (max-width: 900px), print and (max-width: 600px) {
.content {
font-size: 14px;
}
}

Dies applies the style to screens between 600px and 900px wide, or when printing on paper up to 600px wide.

CSS Media Queries - Testen mehrerer Abfragen

Manchmal möchten wir Stile anwenden, wenn eine von mehreren Abfragen wahr ist. Wir verwenden Kommas dafür:

@media (min-width: 600px), (orientation: landscape) {
.header {
position: sticky;
top: 0;
}
}

Dies macht die Kopfzeile sticky, wenn der Bildschirm mindestens 600px breit ist oder im Landscape-Modus ist.

CSS Media Queries - Umkehren einer Abfragebedeutung

Das not Schlüsselwort ermöglicht es uns, die Bedeutung einer Abfrage umzukehren:

@media not all and (orientation: landscape) {
.sidebar {
float: left;
}
}

Dies floatet die Seitenleiste links,除非 das Gerät im Landscape-Modus ist.

CSS Media Queries - Kompatibilität mit älteren Browsern verbessern

Für ältere Browser, die keine Media Queries unterstützen, können wir Fallback-Stile bereitstellen:

.container {
width: 100%; /* Fallback für ältere Browser */
}

@media screen and (min-width: 600px) {
.container {
width: 80%;
}
}

Dies stellt sicher, dass auch auf Browsern, die keine Media Queries verstehen, ein anständiges Layout möglich ist.

Und das war's! Du hast gerade deine ersten Schritte in die Welt des responsiven Webdesigns mit CSS Media Queries unternommen. Denke daran, Übung macht den Meister, also habe keine Angst, mit diesen Konzepten zu experimentieren. Viel Spaß beim Coden!

Credits: Image by storyset