🔹 Variante 1: Im HTML – media="screen" im <link>-Tag

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

✅ Vorteile:

• Frühzeitige Filterung durch den Browser
  → Das Stylesheet wird gar nicht erst geladen oder angewendet, wenn das Medium nicht passt.
• Geringere Netzwerklast bei nicht passenden Medien
• Gut für komplett getrennte CSS-Dateien: z. B. screen.css, print.css, speech.css

⚠️ Nachteile:

• Weniger flexibel innerhalb der Datei – du kannst nicht mehrmals innerhalb eines Stylesheets unterschiedliche Bedingungen setzen
• Die Datei ist komplett „screen-only“ – kein fallback möglich in derselben Datei

🔹 Variante 2: Im CSS – @media screen in der Datei selbst

cssKopierenBearbeiten@media screen {
  body {
    background: lightblue;
  }
}

✅ Vorteile:

• Viel flexibler: Du kannst in einer Datei mehrere Bedingungen kombinieren: cssKopierenBearbeiten@media screen and (max-width: 600px) { … } @media print { … }
• Ermöglicht Responsive Design innerhalb einer einzigen Datei
• Gut geeignet für moderne Layouts und Komponenten

⚠️ Nachteile:

• Die Datei wird immer geladen, auch wenn die @media-Bedingung nicht zutrifft. → Es wird mehr heruntergeladen, aber weniger gerendert.

🚀 Fazit: Was ist besser?

🎯 Empfehlung für heute:

• ✅ Verwende @media innerhalb deiner CSS-Datei, wenn du responsive arbeiten willst.
• ✅ Nutze media="print" oder media="screen" im HTML nur, wenn du klar getrennte Stylesheets hast (z. B. ein spezielles Drucklayout).
• ❌ media="screen" im HTML ist nicht mehr nötig, wenn du sowieso nur für Bildschirme arbeitest – das ist heute fast Standard.