Grundlagen der Media Queries

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

Eine Media Query in CSS ermöglicht es einer Website, sich an verschiedene 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;  
    }  
}

Bedingung: Die Regel, die die Stile auslöst (z. B. max-width: 600px).
Selektor: Das bzw. die zu formatierenden HTML-Elemente.

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

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

max-width: Beschränkt 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).

Diese Bedingungen helfen dir dabei, das Aussehen deiner Website auf verschiedenen Geräten und in unterschiedlichen Ausrichtungen zu steuern.

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 zu lightblue, wenn die Bildschirmbreite 600px oder weniger beträgt. Für Bildschirme zwischen 601px und 1024px ist die Hintergrundfarbe lightgreen.

Aufgabe

Einfach

Dir liegt ein HTML-Dokument mit einer Überschrift (<h1>), einem Absatz (<p>) und einem <div> vor. 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:
- Lege die Hintergrundfarbe des body auf Hellblau fest.
- Lege die Schriftgröße der Überschrift (<h1>) auf 5vw (5 % der Ansichtsbreite) fest.
Füge eine @media-Abfrage für Bildschirme mit einer Mindestbreite von 601px und einer maximalen Breite von 1024px hinzu:
- Lege die Hintergrundfarbe des body auf Hellgrün fest.
- Lege die Schriftgröße der Überschrift (<h1>) auf 3vw (3 % der Ansichtsbreite) fest.

Ä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>