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 verschiedene Bildschirmgrößen anzupassen, indem Stile basierend auf der Gerätebreite, -höhe oder anderen Eigenschaften 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 oder die zu gestaltenden HTML-Element(e).

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

In einer Media-Query kann die Bedingung auf verschiedenen Faktoren wie Bildschirmgröße, Auflösung und mehr basieren. Einige häufige Bedingungen sind:

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

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

Diese Bedingungen helfen Ihnen dabei zu steuern, wie Ihre Website auf verschiedenen Geräten und 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 auf lightblue, wenn die Bildschirmbreite 600px oder weniger beträgt. Für Bildschirme zwischen 601px und 1024px wird die Hintergrundfarbe lightgreen sein.

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit einer Überschrift (<h1>), einem Absatz (<p>) und einem <div>. Ihre Aufgabe ist es, Media Queries hinzuzufügen, um die Seite responsiv zu gestalten. Befolgen Sie die folgenden Schritte:

Fügen Sie eine @media-Abfrage für Bildschirme mit einer maximalen Breite von "600px" hinzu:
- Setzen Sie die Hintergrundfarbe des Body auf "lightblue".
- Setzen Sie die Schriftgröße der Überschrift (<h1>) auf 5vw (5 % der Viewport-Breite).
Fügen Sie eine @media-Abfrage für Bildschirme mit einer Mindestbreite von "601px" und einer maximalen Breite von "1024px" hinzu:
- Setzen Sie die Hintergrundfarbe des Body auf "lightgreen".
- Setzen Sie die Schriftgröße der Überschrift (<h1>) auf 3vw (3 % der Viewport-Breite).

Ändern Sie die Größe des Browserfensters, um zu sehen, wie die Media Queries das Layout dynamisch anpassen.

Spickzettel

Grundlegende Syntax:

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

Häufige Bedingungen:

max-width: Begrenzt Stile auf Bildschirme mit einer maximalen Breite
min-width: Wendet Stile auf Bildschirme mit einer minimalen Breite an
max-height: Begrenzt Stile auf Bildschirme mit einer maximalen Höhe
min-height: Wendet Stile auf Bildschirme mit einer minimalen Höhe an

Beispiel:

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

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

Probier es selbst

<html>
<head>
    <title>Media Queries Basics</title>
    <!--Schreibe deinen Code hier-->
    <style>
        
        
    </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>