Media Queries Grundlagen

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy. Lektion 65 von 76.

Eine Media Query in CSS ermöglicht es einer Website, sich an unterschiedliche Bildschirmgrößen anzupassen, indem Stile basierend auf der Breite, Höhe oder anderen Eigenschaften des Geräts angewendet werden.

Grundlegende Syntax für Media Queries:

@media (condition) {  
    selector {  
        property: value;  
    }  
}

condition: Die Regel, die die Stile auslöst (z. B. max-width: 600px).
selector: Das bzw. die HTML-Elemente, auf die die Stile angewendet werden.

property: Die festzulegende CSS-Eigenschaft (z. B. width, font-size).
value: Der der Eigenschaft zugewiesene Wert, der sich abhängig von der Bedingung der Medienabfrage ändert.

In einer Media Query kann die condition auf verschiedenen Faktoren wie Bildschirmgröße, Auflösung und mehr basieren. Zu den häufigsten Bedingungen gehören:

max-width: Begrenzt die Stile auf Bildschirme mit einer maximalen Breite (z. B. max-width: 600px).
min-width: Wendet Stile auf Bildschirme mit einer minimalen Breite an (z. B. min-width: 768px).

max-height: Beschränkt Stile auf Bildschirme mit einer maximalen Höhe (z. B. max-height: 400px).
min-height: Wendet Stile auf Bildschirme mit einer minimalen Höhe an (z. B. min-height: 500px).

These Bedingungen helfen dir dabei zu steuern, wie deine Website auf verschiedenen Geräten und in unterschiedlichen Ausrichtungen aussieht.

Beispiel:

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

@media (min-width: 601px) and (max-width: 1024px) {
  body {background-color: lightgreen;}

Dies ändert die Hintergrundfarbe in lightblue, wenn die Bildschirmbreite 600px oder weniger beträgt. Für Bildschirme zwischen 601px und 1024px ist die Hintergrundfarbe lightgreen.

Aufgabe

Einfach

Du erhältst ein HTML-Dokument mit einer Überschrift (<h1>), einem Absatz (<p>) und einem <div>. Deine Aufgabe besteht darin, media Queries hinzuzufügen, um die Seite responsiv zu gestalten. Befolge die folgenden Schritte:

Füge eine @media-Abfrage für Bildschirme mit einer maximalen Breite von 600px hinzu:
- Setze die background color des body auf light blue.
- Setze die font size der Überschrift (<h1>) auf 5vw (5 % der Viewportbreite).
Füge eine @media-Abfrage für Bildschirme mit einer minimalen Breite von 601px und einer maximalen Breite von 1024px hinzu:
- Setze die background color des body auf light green.
- Setze die font size der Überschrift (<h1>) auf 3vw (3 % der Viewportbreite).

Verändere die Größe des Browserfensters, um zu sehen, wie die media Queries das Layout dynamisch anpassen.

Probier es selbst

<html>
<head>
    <title>Media Queries Basics</title>
    <style>
    <!--Schreibe deinen Code hier-->
        
    </style>
</head>
<body>
    <h1>Whales: The Ocean Giants</h1>  
    <p>Whales are magnificent giants of the sea, famous for their intelligence and powerful songs. These gentle creatures face threats like hunting and pollution, making them vital to protect.</p>  
    <div>As ocean's true giants, whales help maintain the delicate balance of marine life.</div>  
</body>
</html>