02_MediaQuery

Code-Dateien

DateinameAktion
CODECode_MediaQuery.zipDownload

Videos

DateinameAktion
VIDEOVideo_MediaQuery_DAbspielen

Lernmaterialien

Was ist eine Media Query?

Eine Media Query ist ein Teil von CSS, mit dem du unterschiedliche CSS-Regeln abhängig vom Gerät / Bildschirm anwenden kannst.

Damit kannst du z. B. festlegen:

  • Auf Handys soll alles untereinander stehen.

  • Auf PCs sollen Inhalte nebeneinander stehen.

  • Im Dark Mode sollen andere Farben gelten.

➡️ Media Queries sind ein Kernwerkzeug für Responsive Design.

Warum braucht man Media Queries?

Webseiten werden auf sehr unterschiedlichen Geräten geöffnet:

  • Smartphone (schmal) 📱

  • Tablet (mittel)

  • Laptop / PC (breit) 💻

  • großer Monitor 🖥️

Wenn du nur „fixes“ CSS schreibst (z. B. feste Breiten), sieht die Seite oft:

  • am Handy zu breit (man muss scrollen),

  • am PC zu leer oder unübersichtlich aus.

Media Queries lösen das, indem sie Layout und Schriftgröße anpassen.

Der wichtigste HTML-Eintrag für Mobile

Damit Media Queries auf Handys richtig funktionieren, gehört in den <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bedeutung:

  • width=device-width → die Seitenbreite = Gerätebreite

  • initial-scale=1.0 → nicht automatisch rauszoomen

Syntax einer Media Query

@media (Bedingung) {
  /* CSS-Regeln, die nur dann gelten */
}

Beispiel:

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

➡️ Der Hintergrund wird nur gelb, wenn der Bildschirm 600px oder schmaler ist.

Die häufigsten Bedingungen

1) Breite: max-width und min-width

✅ max-width (bis zu einer Breite)

@media (max-width: 600px) { ... }

➡️ gilt für 600px und kleiner (typisch: Handy)

✅ min-width (ab einer Breite)

@media (min-width: 900px) { ... }

➡️ gilt ab 900px (typisch: Desktop)

Beispiel 1: Flexbox auf Handy umstellen

Ziel: Desktop → nebeneinander, Handy → untereinander

.container {
  display: flex;
  gap: 20px;
}

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Ergebnis:

  • Desktop: row (Standard) → nebeneinander

  • Handy: column → untereinander

Beispiel 2: Grid-Spalten anpassen

Ziel: 3 Spalten am PC, 1 Spalte am Handy

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

@media (max-width: 700px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Beispiel 3: Schriftgrößen anpassen

Ziel: Auf kleinen Geräten etwas kleinere Schrift

h1 { font-size: 2.2rem; }
p  { font-size: 1rem; }

@media (max-width: 600px) {
  h1 { font-size: 1.6rem; }
  p  { font-size: 0.95rem; }
}

Beispiel 4: Orientierung (Portrait / Landscape)

@media (orientation: landscape) {
  body {
    background: lightblue;
  }
}

➡️ Gilt nur im Querformat.

Beispiel 5: Dark Mode

@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #eee;
  }
}

➡️ Wenn der Benutzer Dark Mode aktiviert hat, wird die Seite dunkel.

Breakpoints: typische Schwellenwerte

Es gibt keine „einzig richtigen“ Werte, aber oft verwendet man:

Gerät Breite (ca.)
Handy bis ~600px
Tablet ~600–900px
Desktop ab ~900px

Viele Projekte nutzen Breakpoints wie: 576 / 768 / 992 / 1200px (z. B. aus Bootstrap).

Best Practices für den Unterricht

✅ Mobile-first (empfohlen):

  • Schreibe zuerst CSS für kleine Bildschirme

  • Dann erweitere mit min-width für größere Geräte

Beispiel:

/* Standard: Mobile */
.grid { grid-template-columns: 1fr; }

/* Tablet und größer */
@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop und größer */
@media (min-width: 1000px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

Merksatz für Schüler:innen

Media Query = CSS-Regeln, die nur bei bestimmten Bildschirmbedingungen gelten.
Damit wird eine Webseite responsive.

Beispiel

index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Responsive Media Query Example</title>

  <!-- Wichtig für Responsive Design -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header>
    <h1>My Responsive Website</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section class="intro">
      <h2>Welcome 👋</h2>
      <p>
        This is a simple example website that demonstrates
        <strong>Media Queries</strong>, <strong>Flexbox</strong>,
        <strong>Grid</strong> and <strong>Responsive Design</strong>.
      </p>
    </section>

    <section class="cards">
      <h2>My Cards</h2>
      <div class="grid">
        <div class="card">Card A</div>
        <div class="card">Card B</div>
        <div class="card">Card C</div>
        <div class="card">Card D</div>
        <div class="card">Card E</div>
        <div class="card">Card F</div>
      </div>
    </section>
  </main>

  <footer>
    <p>© 2025 – Responsive Design Demo</p>
  </footer>

</body>
</html>

1️⃣ Dokumenttyp & HTML-Grundgerüst

<!DOCTYPE html>
<html lang="de">

Erklärung:

  • <!DOCTYPE html>
    → sagt dem Browser: Das ist modernes HTML5
    → wichtig für korrektes Rendering

  • <html lang="de">
    → Wurzelelement der Seite
    → lang="de" hilft:

    • Screenreadern (Barrierefreiheit)

    • Suchmaschinen

    • Browsern (z. B. Rechtschreibung)

2️⃣ <head> – Metadaten (nicht sichtbar)

<head>
  <meta charset="UTF-8">
  <title>Responsive Media Query Example</title>

Erklärung:

  • <meta charset="UTF-8">
    → ermöglicht Umlaute & Sonderzeichen (ä, ö, ü, €)

  • <title>
    → Titel im Browser-Tab
    → wichtig für SEO & Übersicht

📱 Viewport (sehr wichtig!)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Erklärung:

  • sorgt dafür, dass die Seite auf Smartphones korrekt skaliert

  • ohne diesen Tag:

    • Seite wird „herausgezoomt“

    • Media Queries funktionieren nicht richtig

🎨 CSS einbinden

<link rel="stylesheet" href="style.css">

Erklärung:

  • verbindet HTML mit der externen CSS-Datei

  • trennt:

    • Inhalt (HTML)

    • Design (CSS)

3️⃣ <body> – Sichtbarer Seiteninhalt

<body>

Alles ab hier ist sichtbar im Browser.

4️⃣ <header> – Kopfbereich der Seite

<header>
  <h1>My Responsive Website</h1>

Erklärung:

  • <header> ist ein semantisches HTML5-Element

  • enthält meist:

    • Überschrift

    • Logo

    • Navigation

  • <h1>
    → wichtigste Überschrift der Seite
    → sollte nur einmal pro Seite vorkommen

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Erklärung:

  • <nav>
    → semantisch: Navigationsbereich

  • <ul>
    → ungeordnete Liste (typisch für Menüs)

  • <li>
    → einzelner Menüpunkt

  • <a href="#">
    → Link
    → # ist ein Platzhalter (führt zu keiner Seite)

💡 Warum Listen für Menüs?

  • logisch

  • barrierefrei

  • gut mit CSS (Flexbox) formatierbar

6️⃣ <main> – Hauptinhalt der Seite

<main>

Erklärung:

  • enthält den zentralen Inhalt

  • pro Seite nur einmal

  • wichtig für Screenreader & SEO

7️⃣ Erste Section: Einführung

<section class="intro">
  <h2>Welcome 👋</h2>
  <p>
    This is a simple example website that demonstrates
    <strong>Media Queries</strong>, <strong>Flexbox</strong>,
    <strong>Grid</strong> and <strong>Responsive Design</strong>.
  </p>
</section>

Erklärung:

  • <section>
    → thematischer Abschnitt

  • class="intro"
    → Verbindung zu CSS

  • <h2>
    → Unterüberschrift (logische Hierarchie nach h1)

  • <p>
    → Absatz

  • <strong>
    → semantische Betonung (wichtig, nicht nur fett!)

8️⃣ Zweite Section: Karten / Grid

<section class="cards">
  <h2>My Cards</h2>

  • neuer thematischer Bereich

  • Überschrift erklärt den Inhalt

Grid-Container

<div class="grid">

Erklärung:

  • div ist ein neutraler Container

  • Klasse .grid aktiviert im CSS das Grid-Layout

Einzelne Karten

<div class="card">Card A</div>
<div class="card">Card B</div>
<div class="card">Card C</div>

Erklärung:

  • jede Karte ist ein Grid-Item

  • gleiche Klasse → gleiches Styling

  • Layout (3 / 2 / 1 Spalte) kommt nur aus CSS

<footer>
  <p>© 2025 – Responsive Design Demo</p>
</footer>

Erklärung:

  • <footer>
    → Abschluss der Seite

  • enthält oft:

    • Copyright

    • Impressum

    • Links

  • <p>
    → normaler Text

🔟 Struktur als Übersicht (DOM-Sicht)

html
 ├── head
 └── body
     ├── header
     │    ├── h1
     │    └── nav
     │         └── ul → li → a
     ├── main
     │    ├── section.intro
     │    └── section.cards
     │         └── div.grid → div.card
     └── footer

style.css

/* =========================
   CSS VARIABLES
   ========================= */
:root {
  --brand: #0a66c2;
  --accent: #f39c12;
  --bg: #f5f5f5;
  --text: #333;
  --radius: 10px;
}

/* =========================
   GLOBAL STYLES (Vererbung)
   ========================= */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: var(--text);
  background-color: var(--bg);
  line-height: 1.6;
}

/* =========================
   HEADER + NAV (Flexbox)
   ========================= */
header {
  background-color: var(--brand);
  color: white;
  text-align: center;
  padding: 20px;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 0;
  margin: 10px 0 0 0;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

/* =========================
   MAIN CONTENT
   ========================= */
main {
  max-width: 900px;
  margin: 20px auto;
  padding: 20px;
  background: white;
  border-radius: var(--radius);
}

.intro {
  margin-bottom: 30px;
}

/* =========================
   GRID SECTION
   ========================= */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.card {
  background-color: var(--brand);
  color: white;
  padding: 30px;
  border-radius: var(--radius);
  text-align: center;
  font-size: 1.1rem;
}

/* =========================
   FOOTER
   ========================= */
footer {
  text-align: center;
  padding: 15px;
  background-color: var(--brand);
  color: white;
  margin-top: 30px;
}

/* =========================
   MEDIA QUERY (RESPONSIVE)
   ========================= */

/* Tablet & smaller */
@media (max-width: 900px) {

  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* Smartphone */
@media (max-width: 600px) {

  nav ul {
    flex-direction: column;
    gap: 10px;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  header h1 {
    font-size: 1.5rem;
  }

}

Gerne — ich erkläre dir das CSS aus dem Beispiel Schritt für Schritt, so dass du es direkt im Unterricht verwenden kannst.

1) CSS-Variablen :root

:root {
  --brand: #0a66c2;
  --accent: #f39c12;
  --bg: #f5f5f5;
  --text: #333;
  --radius: 10px;
}

  • :root ist das oberste Element (<html>).

  • --brand, --accent usw. sind CSS-Variablen (Custom Properties).

  • Vorteil: Du kannst das gesamte Design ändern, indem du nur hier Farben/Rundungen änderst.

Verwendung später im CSS:

color: var(--text);
background-color: var(--brand);
border-radius: var(--radius);

2) Globale Basis (Vererbung) body

body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: var(--text);
  background-color: var(--bg);
  line-height: 1.6;
}

Das ist der Grundstil für die ganze Seite:

  • margin: 0; → Browser haben standardmäßig Außenabstände. Wir entfernen sie.

  • font-family → Schriftart für die ganze Seite (wird vererbt).

  • color → Textfarbe für die ganze Seite (wird vererbt).

  • background-color → Seitenhintergrund (wird nicht „vererbt“, gilt aber fürs body).

  • line-height: 1.6; → Zeilenabstand, macht Text besser lesbar (wird vererbt).

👉 Vererbung: p, h1, h2 usw. übernehmen automatisch Schrift, Textfarbe, Zeilenhöhe, solange sie nichts Eigenes definieren.

3) Header-Stil

header {
  background-color: var(--brand);
  color: white;
  text-align: center;
  padding: 20px;
}

  • background-color → Hintergrundfarbe des Headers.

  • color: white; → Textfarbe im Header (wird an h1, Links etc. vererbt, außer überschrieben)

  • text-align: center; → zentriert Text im Header.

  • padding: 20px; → Innenabstand (damit es nicht „klebt“).

4) Navigation (Flexbox)

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 0;
  margin: 10px 0 0 0;
}

Das betrifft nur die Liste in der Navigation.

  • list-style: none; → entfernt die Punkte (•).

  • display: flex; → macht die Menüeinträge nebeneinander.

  • justify-content: center; → zentriert die Einträge horizontal.

  • gap: 20px; → Abstand zwischen den Menüeinträgen.

  • padding: 0; → entfernt Standard-Innenabstand der Liste.

  • margin: 10px 0 0 0; → 10px Abstand oben, sonst 0.

Links:

nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

  • text-decoration: none; → entfernt Unterstreichung.

  • font-weight: bold; → fett.

5) Hauptbereich main

main {
  max-width: 900px;
  margin: 20px auto;
  padding: 20px;
  background: white;
  border-radius: var(--radius);
}

Das macht den Content wie eine „Card“ in der Mitte:

  • max-width: 900px; → nicht zu breit auf großen Bildschirmen.

  • margin: 20px auto; → oben/unten 20px, links/rechts automatisch → zentriert.

  • padding: 20px; → Innenabstand.

  • background: white; → weiße Fläche auf grauem Hintergrund.

  • border-radius → runde Ecken.

6) Grid für Karten

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

  • display: grid; → aktiviert Grid Layout.

  • grid-template-columns: repeat(3, 1fr);

    • 3 Spalten

    • 1fr = „ein Anteil“ der verfügbaren Breite → alle Spalten gleich groß

  • gap: 15px; → Abstand zwischen den Karten.

Karten:

.card {
  background-color: var(--brand);
  color: white;
  padding: 30px;
  border-radius: var(--radius);
  text-align: center;
  font-size: 1.1rem;
}

  • Hintergrund blau, Text weiß.

  • padding macht sie größer/luftiger.

  • font-size setzt die Schriftgröße (1.1 × Standardschrift).

7) Footer

footer {
  text-align: center;
  padding: 15px;
  background-color: var(--brand);
  color: white;
  margin-top: 30px;
}

  • Optisch ähnlich wie Header.

  • margin-top: 30px; → Abstand zum Inhalt.

8) Media Queries (Responsive Design)

Tablet (≤ 900px)

@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

Wenn Bildschirm 900px oder kleiner:

  • Grid wechselt von 3 Spalten auf 2 Spalten.

Smartphone (≤ 600px)

@media (max-width: 600px) {

  nav ul {
    flex-direction: column;
    gap: 10px;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  header h1 {
    font-size: 1.5rem;
  }
}

Wenn Bildschirm 600px oder kleiner:

  • flex-direction: column; → Menü wird untereinander statt nebeneinander.

  • grid-template-columns: 1fr; → Karten nur eine Spalte (untereinander).

  • Überschrift wird kleiner, damit sie am Handy passt.

Kahoot!