CSS RWD - Media Queries

Willkommen, ambitionierte Web-Entwickler! Heute tauchen wir in die aufregende Welt des Responsive Web Designs (RWD) ein und konzentrieren uns auf eines seiner mächtigsten Werkzeuge: Media Queries. Stellen Sie sich vor, Sie malen ein wunderschönes Bild, aber es muss sowohl auf einer winzigen Postkarte als auch auf einer riesigen Plakatwand gut aussehen. Genau das machen wir mit Websites, und Media Queries sind unsere magische Pinsel!

Was sind Media Queries?

Media Queries sind wie die Chamäleons der CSS-Welt. Sie ermöglichen es Ihrer Website, sich an das Aussehen des Gerätes anzupassen, auf dem sie angezeigt wird. Ob es sich um ein Smartphone, ein Tablet oder einen Desktop-Computer handelt, Media Queries helfen dabei, sicherzustellen, dass Ihre Website überall toll aussieht.

Lassen Sie uns mit einem grundlegenden Beispiel beginnen:

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

In diesem Code sagen wir: "Hey Browser, wenn die Bildschirmbreite 600 Pixel oder weniger beträgt, male den Hintergrund hellblau!" Das ist, als würde Ihre Website auf kleinen Bildschirmen eine erfrischende Optik erhalten.

CSS RWD Media Query - Breiten-Eigenschaft

Die Breiten-Eigenschaft ist unser bester Freund, wenn es um die Erstellung von responsiven Designs geht. Sie ermöglicht es uns, verschiedene Stile basierend auf der Breite des Bildschirms des Gerätes festzulegen.

Schauen wir uns ein umfassenderes Beispiel an:

/* Standard-Stile für größere Bildschirme */
.container {
width: 80%;
margin: 0 auto;
}

/* Stile für Bildschirme mit 768px oder weniger */
@media screen and (max-width: 768px) {
.container {
width: 95%;
}
}

/* Stile für Bildschirme mit 480px oder weniger */
@media screen and (max-width: 480px) {
.container {
width: 100%;
}
}

Das ist, was passiert:

1. Standardmäßig ist unsere Container 80% breit mit etwas Rand an den Seiten.
2. Wenn der Bildschirm auf 768px oder weniger schrumpft, erhöhen wir die Breite auf 95%.
3. Auf sehr kleinen Bildschirmen (480px oder weniger) machen wir den Container vollbreit.

Es ist, als würde Ihre Website Yoga machen, sich dehnen und strecken, um auf jedem Bildschirm perfekt zu passen!

CSS RWD Media Query - Mehrere Breakpoints

Nun sprechen wir über Breakpoints. Das sind die Punkte, an denen sich das Layout Ihrer Website ändert, um das beste Benutzererlebnis zu bieten. Denken Sie daran als "Bruchpunkte", an denen Ihr Design angepasst werden muss.

Hier ist ein Beispiel mit mehreren Breakpoints:

/* Basis-Stile */
body {
font-size: 16px;
}

/* Große Bildschirme */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
}

/* Mittlere Bildschirme */
@media screen and (min-width: 992px) and (max-width: 1199px) {
body {
font-size: 17px;
}
}

/* Kleine Bildschirme */
@media screen and (max-width: 991px) {
body {
font-size: 15px;
}
}

In diesem Beispiel passen wir die Schriftgröße basierend auf verschiedenen Bildschirmgrößen an:

• Auf großen Bildschirmen (1200px und mehr) erhöhen wir die Schriftgröße auf 18px.
• Für mittlere Bildschirme (zwischen 992px und 1199px) verwenden wir eine Schriftgröße von 17px.
• Auf kleinen Bildschirmen (991px und weniger) verringern wir die Schriftgröße leicht auf 15px.

Es ist, als hätten Sie eine responsive Garderobe, die immer perfekt passt, egal wie viel Sie gegessen haben!

CSS RWD Media Query - Verwendung der Orientierung

Wussten Sie, dass Ihre Website erkennen kann, ob ein Gerät im Portrait- oder Landscape-Modus gehalten wird? Das stimmt, und wir können diese Information nutzen, um noch angepasstere Designs zu erstellen.

So können wir die Orientierungsfunktion verwenden:

/* Stile für Portrait-Orientierung */
@media screen and (orientation: portrait) {
.sidebar {
width: 100%;
float: none;
}
.main-content {
margin-left: 0;
}
}

/* Stile für Landscape-Orientierung */
@media screen and (orientation: landscape) {
.sidebar {
width: 25%;
float: left;
}
.main-content {
margin-left: 26%;
}
}

In diesem Beispiel:

• Wenn das Gerät im Portrait-Modus (höher als breit) gehalten wird, machen wir die Seitenleiste vollbreit und entfernen die Ausrichtung.
• Im Landscape-Modus erstellen wir ein nebeneinander liegendes Layout, wobei die Seitenleiste 25% der Breite einnimmt.

Es ist, als würde Ihre Website Artistik machen, zwischen Portrait und Landscape mit Style wechseln!

Alles zusammenfügen

Nun, da wir die Grundlagen gelernt haben, schauen wir uns ein komplexeres Beispiel an, das alles, was wir gelernt haben, kombiniert:

/* Basis-Stile */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}

.container {
width: 80%;
margin: 0 auto;
}

/* Große Bildschirme */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
.container {
max-width: 1140px;
}
}

/* Mittlere Bildschirme */
@media screen and (min-width: 992px) and (max-width: 1199px) {
body {
font-size: 17px;
}
.container {
max-width: 960px;
}
}

/* Kleine Bildschirme */
@media screen and (max-width: 991px) {
body {
font-size: 16px;
}
.container {
width: 95%;
}
}

/* Extra kleine Bildschirme */
@media screen and (max-width: 576px) {
body {
font-size: 15px;
}
.container {
width: 100%;
padding: 0 15px;
}
}

/* Landscape-Orientierung */
@media screen and (orientation: landscape) and (max-height: 500px) {
.header {
position: static;
}
.main-content {
margin-top: 20px;
}
}

Dieses umfassende Beispiel zeigt, wie wir ein vollständiges responsives Design erstellen können, das sich an verschiedene Bildschirmgrößen und Orientierungen anpasst. Wir passen Schriftgrößen, Containerbreiten und sogar Layouts basierend auf den Eigenschaften des Gerätes an.

Schlussfolgerung

Herzlichen Glückwunsch! Sie haben Ihre ersten Schritte in die Welt des responsiven Webdesigns mit Media Queries unternommen. Denken Sie daran, dass das Erstellen von responsiven Websites wie das Sein eines digitalen Chamäleons ist – Ihr Inhalt sollte in jeder Form großartig aussehen.

While you practice and experiment with media queries, you'll develop an intuition for creating designs that work seamlessly across all devices. Keep exploring, keep coding, and most importantly, have fun! Your websites will thank you by looking fabulous everywhere they go.

Methode	Beschreibung
@media screen	Zielt auf alle Bildschirmarten ab
max-width	Setzt eine maximale Breitenbedingung
min-width	Setzt eine minimale Breitenbedingung
orientation: portrait	Zielt auf Geräte im Portrait-Modus ab
orientation: landscape	Zielt auf Geräte im Landscape-Modus ab

Happy Coding und mögen Ihre Websites stets responsiv sein!

Credits: Image by storyset