8. Media Queries & Responsivität

Damit die Seite auf dem Handy gut aussieht, nutzen wir Media Queries, um das Layout bei kleinen Bildschirmen anzupassen.

@media (max-width: 600px) {
  .sidebar { display: none; }
  .content { margin-left: 0; }
}

8. Media Queries

Media Queries sind die Technik, die das Internet auf dem Handy überhaupt erst benutzbar macht. Früher sahen Webseiten auf dem Handy genauso aus wie am Computer – nur eben winzig klein, sodass man ständig zoomen musste. Media Queries ändern das. Sie sind wie kleine Detektive, die den Browser fragen: "Wie breit ist eigentlich gerade dein Fenster?". Wenn die Antwort lautet: "Ich bin schmaler als 600 Pixel (also ein Handy)", dann schalten die Media Queries ein spezielles CSS-Design frei. Du kannst damit sagen: "Am Computer stehen diese drei Boxen nebeneinander, aber wenn es ein Handy ist, staple sie bitte untereinander". So verhinderst du, dass der Nutzer seitlich scrollen muss. Man kann damit auch Schriftarten auf dem Handy größer machen oder unwichtige Bilder ausblenden, damit die Seite schneller lädt. Im Grunde erlauben Media Queries es dir, für jedes Gerät (Handy, Tablet, Laptop, großer Fernseher) eine eigene "Version" deines Designs zu erstellen, ohne dass du die Website mehrfach programmieren musst. Das nennt man "Responsive Design" – die Website reagiert (responded) auf das Gerät des Nutzers. In der heutigen Zeit, wo mehr Menschen mit dem Handy surfen als mit dem PC, ist das absolut unverzichtbar.