Date post: | 09-May-2015 |
Category: |
Technology |
Upload: | michael-jendryschik |
View: | 3,209 times |
Download: | 1 times |
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