Aus dem Kurs: Responsive Webdesign – Grundlagen

Erhalten Sie Zugriff auf diesen Kurs – mit einer kostenlosen Probeversion

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

Media Queries im Detail

Media Queries im Detail

Aus dem Kurs: Responsive Webdesign – Grundlagen

Gratismonat starten Für Ihr Team erwerben

Media Queries im Detail

“

Das ist eine klassische Media Query mit "screen and min width 540" Pixeln im Beispiel. Was kann ich denn sonst schreiben, außer "screen" und was für andere Angaben kann ich abfragen, außer "min width"? Beginnen wir mit den Media-Typen, dort können Sie verwenden "all" für alle, "screen", das hatten wir im Beispiel, "print" für Drucker, es gibt auch "speech" für Sprachbrowser. Im Beispiel eben hatten wir "and", das bedeutet, dass beides zu treffen muss und Sie können auch Angaben machen, wo Sie mehrere Bedingungen auf diese Art abfragen, die alle gelten müssen. Im Beispielen muss es sich um einen Viewport handeln, auf einem Bildschirm mit einer Mindestbreite von 367 Pixeln und einer Maximal-Breite von 972 Pixeln. Sie können mehrere Angaben auch durch Komma trennen, dann müssen nicht beide Angaben gleichzeitig erfüllt sein, es genügt, wenn eine der Angaben erfüllt ist. Manchmal begegnet ihnen vielleicht das Schlüsselwort "only", das hat man früher genutzt, dafür um Media Queries vor…

Inhalt