{"id":99380,"date":"2022-08-18T15:48:28","date_gmt":"2022-08-18T13:48:28","guid":{"rendered":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?p=99380"},"modified":"2022-08-19T10:24:53","modified_gmt":"2022-08-19T08:24:53","slug":"css-media-queries","status":"publish","type":"post","link":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/css-media-queries\/","title":{"rendered":"Was sind CSS Media Queries und wof\u00fcr ben\u00f6tige ich sie?"},"content":{"rendered":"\n

Die Abst\u00e4nde auf der Website in der mobilen Ausgabe gefallen dir nicht? Die Anordnung der Boxen in der Desktop-Ansicht \u00fcberzeugt dich nicht? Solche und \u00e4hnliche Probleme kannst du in CSS seit l\u00e4ngerer Zeit problemlos l\u00f6sen: mit Media Queries. \"\"<\/p>\n\n\n\n

Vielleicht hast du schon Mal solche oder \u00e4hnliche Konstrukte in CSS gesehen und dich gefragt wof\u00fcr die gut sind:<\/p>\n\n\n\n

@media (max-width: 700px) {{.hinweisbox {padding: 3%;}}<\/pre>\n\n\n\n
Salopp gesagt: Du kannst mithilfe von Media Queries, die CSS-Angaben in verschiedene Schubladen einsortieren, die dann je nach Szenario ge\u00f6ffnet oder geschlossen bleiben.<\/p>\n\n\n\n
Der obere Code war ein Beispiel f\u00fcr eine Medienabfrage (engl. Media Query<\/em>). Die CSS-Regel innerhalb der geschweiften Klammer, wird nur unter bestimmten Umst\u00e4nden angewandt, und zwar dann, wenn die Breite des Fensters (engl. Viewport<\/em>) maximal 700 Pixel breit ist.<\/p>\n\n\n\n
Ist das Fenster dagegen 701 oder mehr Pixel breit, dann wird die Regel ignoriert.<\/p>\n\n\n\n
Mehrere Bedingungen kombiniert<\/h2>\n\n\n\n
Die Medienanfragen erlaubt dir nicht nur eine Bedingung. Du kannst die problemlos miteinader kombinieren. So k\u00f6nnte eine Abfrage ausschauen, die Fensterbreiten in einem bestimmten Bereich ber\u00fccksichtigt. Die folgende Abfrage spricht nur Fensterbreiten zwischen 700 und 850 Pixel an:<\/p>\n\n\n\n
@media (min-width: 700px) and (max-width: 850px) {{.hinweisbox {padding: 3%;}}<\/pre>\n\n\n\n
Die Medienabfragen ber\u00fccksichtigen nicht nur Zahlenwerte, du kannst ebenfalls mit Schl\u00fcsselw\u00f6rtern (Keywords) arbeiten. Folgende Medienabfrage wird nur bei der Druckausgabe ber\u00fccksichtigt und das auch nur dann, wenn das Fenster mindestens 50 rem breit ist:<\/p>\n\n\n\n
@media print and (min-width: 50rem) {{.hinweisbox {padding: 3%;}}<\/pre>\n\n\n\n
Medienabfragen in HTML-Dokumenten<\/h2>\n\n\n\n
Du kannst mit den Medienabfragen auch in HTML-Dokumenten arbeiten:<\/p>\n\n\n\n
<head>\n    <link rel=\"stylesheet\" href=\"immer.css\">\n    <link rel=\"stylesheet\" href=\"alle-bildschirme.css\" media=\"screen\">\n    <link rel=\"stylesheet\" href=\"drucker.css\" media=\"print\"><\/pre>\n\n\n\n
Das erste CSS hat keine Medienangabe und wird immer<\/strong> angewendet. Das zweite CSS kommt nur bei Bildschirmen zum Einsatz und das dritte CSS wird nur ber\u00fccksichtigt, wenn das Dokument ausgedruckt wird. Bei der Angabe der Schl\u00fcsselw\u00f6rter ist noch nicht Schluss. Auch hier kannst du Zahlenwerte einsetzen:<\/p>\n\n\n\n
<link href=\"mobil.css\" rel=\"stylesheet\" media=\"screen and (max-width: 700px)\"><\/pre>\n\n\n\n
In diesem Fall wird die CSS-Datei nur bei Bildschirmen mit einer maximalen Breite von 700 Pixel geladen und sonst nicht. Solche Einbindungen haben den gro\u00dfen Vorteil<\/strong>, dass sie nicht<\/strong> den Aufbau deiner Website (Rendering Prozess) blockieren.<\/p>\n\n\n\n
Es ist unn\u00f6tig, dass du CSS-Regeln laden l\u00e4sst, die f\u00fcr die Ausgabe nicht notwendig sind. Wenn du das unterbindest, dann machst du die Website schneller<\/strong> und das kommt auch den Besuchern zugute.<\/p>\n\n\n\n
Weitere Informationen und auch Beispiele zu diesem Thema findest du hier:<\/p>\n\n\n\n
Weiterf\u00fchrende Links<\/h2>\n\n\n\n