Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Media Queries sind Medientypen plus Medienfeatures

Media Queries sind Medientypen plus Medienfeatures

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Media Queries sind Medientypen plus Medienfeatures

“

Media Query bedeutet wörtlich übersetzt Medienabfrage und eine solche Abfrage ermöglicht es, einen Medientypen wie Screen mit einem Medienfeature wie der Breite des Viewports zu kombinieren. Mit Media Queries können Sie also beim Gestalten von Webseiten auf die Umgebung reagieren. Und das möchte ich Ihnen jetzt einmal praktisch demonstrieren. Im Editor sehen Sie hier die Beispieldatei zu diesem Film media-query-beispiel.html. Das ist ein ganz simples HTML mit einem fast noch simpleren CSS hier. Definiert ist <meta name="viewport"> und in der Live-Vorschau sieht die Seite so aus wie hier. Ich mache das mal etwas schmaler und schreibe hier an der vordefinierten Stelle die Media Query hin. Und das geht los mit @media, dann der Medientyp, das ist screen und jetzt mache ich schon mal die geschweiften Klammern und ein bisschen Platz dazwischen. Hier kommt später das CSS zum Gestalten. Nach dem Medientyp geht es weiter mit der Medieneigenschaft, die abgefragt werden soll. Und da kommt das…

Inhalt