CSS Media QueriesAuf Geräte und Browser reagieren

Michael Jendryschik

Es gibt verschiedene Möglichkeiten, den

Geltungsbereich von CSS auf bestimmte Medien einzuschränken.

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

@import url("style.css") screen;

@media print { div#header, div#sidebar, div#footer { display: none; }}

aural für Sprachbrowser

braille für Ausgabegerätemit Braillezeile

embossed für Brailledrucker

handheld für Handcomputerund Mobiltelefone

print für Drucker

projection für Projektoren

screen fürComputermonitore

tty für Ausgabemedien mit Festbreitenschrift

tv für Fernseher

Mit CSS Media Queries ist es möglich, die Einbindung von CSS davon abhängig zu machen, ob ein Medium oder Ausgabegerät

bestimmte Merkmaleaufweist oder nicht.

@media (min-width: 950px) {

/* Regeln für breite Browserfenstern */

}

@media (min-width: 450px) and (max-width: 950px) {

  /* Regeln für Netbooks */

}

@media (max-width: 450px) {

/* Regeln für mobile Geräte */

}

@media screen and (max-width: 600px) { .mast, .intro, .main, .footer { float: none; width: auto; }}

@media screen and (max-width: 500px) { ... }

@media screen and (max-width: 800px) { ... }

@media screen and (min-width: 1024px) { ... }

@media handheld and (max-device-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) { ... }

@media screen and (min-width: 920px) { ... }

@media screen and (min-width: 1350px) { ... }

@media screen and (min-width: 1500px) { ... }

@media only screen and (max-device-width: 480px) { ... }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { ... }

CSS Media Queries: Grundlagen und Syntax

Media Queries sind logische Ausdrücke, die die Angabe von Medientypen und bestimmten

Medienmerkmalen miteinander verknüpfen.

Bezeichnung Beispiel

Media Query screen and (max-width: 300px)

Medientyp screen and (max-width: 300px)

Verknüpfung screen and (max-width: 300px)

Ausdruck screen and (max-width: 300px)

Merkmal screen and (max-width: 300px)

Wert screen and (max-width: 300px)

Das Schlüsselwort and drückt ein logisches Und aus.

screen and (max-width: 300px)

(min-width: 450px) and (max-width: 950px)

Ein Komma steht für einlogisches Oder.

@import url("style.css") screen, projection;

<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 800px), projection and (min-width: 800px)" />

Das Schlüsselwort not steht für eine logische Negation.

<link rel="stylesheet" type="text/css"

href="style.css"

media="not screen and (color)" />

Das Schlüsselwort only ist ein Workaround für veraltete

Browser, die mit Media Queries nicht umzugehen wissen.

<link rel="stylesheet" type="text/css"

href="style.css"

media="only screen and (color)" />

CSS3 Media QueriesMedienmerkmale

Merkmal min/max Beschreibung

width Ja Breite der Anzeigefläche

height Ja Höhe der Anzeigefläche

device-width Ja Breite des Geräts

device-height Ja Höhe des Geräts

Viewport mindestens 500px hoch?

<link rel="stylesheet" type="text/css"

href="vertical-align.css"

media="screen and (min-height: 500px)"

/>

iPhone?

<link rel="stylesheet" type="text/css"

href="iphone.css"

media="only screen

and (max-device-width: 480px)"

/>

Merkmal min/max Beschreibung

aspect-ratio Ja Verhältnis der Merkmale width und height

device-aspect-ratio Ja Verhältnis der Merkmale device-width und device-height

orientation Nein Ausrichtung des Geräts

Seitenverhältnis 16:9?

screen and (device-aspect-ratio: 16/9)

screen and (device-aspect-ratio: 32/18)

screen and (device-aspect-ratio: 1280/720)

Horizontale oder vertikaleAusrichtung eines iPad?

<link ... href="ipad-portrait.css" media="(min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait)" />

<link ... href="ipad-landscape.css" media="(min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape)" />

Merkmal min/max Beschreibung

color Ja Farbtiefe des Geräts

color-index Ja Anzahl der Einträge in der Farb-Lookup-Tabelle des Geräts

monochrome Ja Anzahl der Bits pro Pixel im Bildspeicher eines einfarbigen Geräts

Schwarzweiß- oder Farbdrucker?

<link rel="stylesheet" type="text/css"

href="print-color.css"

media="print and (color)" />

<link rel="stylesheet" type="text/css"

href="print-monochrome.css"

media="print and (monochrome)" />

iPhone 4?

<link rel="stylesheet" type="text/css"

href="/css/retina.css"

media="only screen and

(-webkit-min-device-pixel-ratio: 2)" />

Browserkompatibilität

Michael Jendryschik

http://jendryschik.de

http://www.itemis.de

http://www.webkrauts.de

http://twitter.com/jendryschik

http://facebook.com/jendryschik

Quellennachweis• http://www.digitale-chancen.de/transfer/assets/468.jpg• http://ceipntrasradelapiedad.files.wordpress.com/2010/03/braille.jpg• http://gadgets.boingboing.net/Palm-Pre-Disassembled.jpg• http://upload.wikimedia.org/wikipedia/commons/d/dc/Westermann_Druckerei_1890.png• http://www.infocus.rbt-pressroom.eu/de/download/der-heimkino-projektor-sp8602-kommt-vielen-hochleistungsfhig

en-eigenschaften-auf-den-markt-4.jpg• http://upload.wikimedia.org/wikipedia/commons/2/2c/Monitor_in_gutter.jpg• http://cmsdata.iucn.org/img/original/iberian_lynx_by_antonio_rivas.jpg• http://www.comcast.com/MediaLibrary/1/1/About/PressRoom/Images/LogoAndMediaLibrary/Photography/

CableNetworks/Teletubbies-Group2.jpg• http://ie.microsoft.com/testdrive/HTML5/85CSS3_MediaQueries/Default.html• http://www.alistapart.com/d/responsive-web-desgin/ex/ex-site-mini.html• http://www.hicksdesign.co.uk/journal• http://www.pm.ruhr-uni-bochum.de/imperia/md/images/pressestelle/einstein.jpg• http://www.colgate.at/OralHealthMonth/AT/2009/arch/2007/colgate_merkmale0805.jpg• http://www.claudia-berg-grafik.de/claudia_berg_Grasland.jpg• http://www.grossi-online.de/gallery2/d/314-1/Farbe_001.jpg• http://www.apple.com/iphone/• http://wallpapers-diq.net/wallpapers/30/Firefox%2C_The_Browser%2C_Reloaded.jpg