Download - CSS Media Queries (WebTech Conference 2010)
![Page 1: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/1.jpg)
Michael Jendryschik | itemis AG
CSS Media QueriesAuf Browser und Geräte reagieren
![Page 2: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/2.jpg)
Michael Jendryschik
• Konzipiert und entwickeltWebsites, schreibt undspricht darüber
• http://jendryschik.de
• Leiter Webentwicklung• http://www.itemis.de
• Webkraut• http://www.webkrauts.de
![Page 3: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/3.jpg)
• Es gibt verschiedene Möglichkeiten, den Geltungsbereich von CSS auf bestimmte Medien einzuschränken.
![Page 4: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/4.jpg)
aural für Sprachbrowser
![Page 5: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/5.jpg)
braille für Gerätemit Braillezeile
![Page 6: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/6.jpg)
embossed fürBrailledrucker
![Page 7: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/7.jpg)
handheld für Handcomputer und Mobiltelefone
![Page 8: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/8.jpg)
print für Drucker
![Page 9: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/9.jpg)
projection für Projektoren
![Page 10: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/10.jpg)
screen für Monitore
![Page 11: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/11.jpg)
tty für Ausgabemedienmit Festbreitenschrift
![Page 12: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/12.jpg)
tv für Fernseher
![Page 13: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/13.jpg)
CSS-Medientypen Typ Medium
all alle Geräte
aural Sprachbrowser
braille Ausgabegeräte mit Braillezeile
embossed Brailledrucker
handheld Handcomputer und Mobiltelefone
print Drucker
projection Projektion
screen Computermonitore
tty Ausgabemedien mit Festbreitenschrift
tv Fernseher
![Page 14: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/14.jpg)
<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; }
}
![Page 15: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/15.jpg)
• Mit CSS Media Queries ist es möglich, die Einbindung von CSS davon abhängig zu machen, ob ein Medium oder Ausgabegerät bestimmte Merkmale aufweist oder nicht.
![Page 16: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/16.jpg)
Microsoft IE Test Drive
![Page 17: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/17.jpg)
@media (min-width: 950px) {
/* Regeln für breite Browserfenster */
}
@media (min-width: 450px) and (max-width: 950px) {
/* Regeln für Netbooks */
}
@media (max-width: 450px) {
/* Regeln für mobile Geräte */
}
![Page 18: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/18.jpg)
A List Apart Artikelbeispiel
![Page 19: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/19.jpg)
@media screen and (max-width: 600px) {
.mast,
.intro,
.main,
.footer {
float: none;
width: auto;
}
}
![Page 20: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/20.jpg)
Jon Hicks
![Page 21: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/21.jpg)
@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) { … }
![Page 22: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/22.jpg)
kleines iPhone-Beispiel
<ol>
<li class="ready">Fertig?</li>
<li class="go">Los!</li>
</ol>
![Page 23: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/23.jpg)
kleines iPhone-Beispiel
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
body { background-color: yellow; }
li.go { display: none; }
}
![Page 24: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/24.jpg)
kleines iPhone-Beispiel
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
body { color: white; background-color: green;
}
li.ready { display: none; }
}
![Page 25: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/25.jpg)
![Page 26: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/26.jpg)
CSS Media QueriesGrundlagen und Syntax
![Page 27: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/27.jpg)
• Media Queries sind logische Ausdrücke, die die Angabe von Medientypen und bestimmten Medienmerkmalen miteinander verknüpfen.
![Page 28: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/28.jpg)
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)
![Page 29: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/29.jpg)
• Das Schlüsselwort and drückt ein logisches Und aus.
screen and (max-width: 300px)
(min-width: 450px)and (max-width: 950px)
![Page 30: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/30.jpg)
• Ein Komma steht für ein logisches 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)" />
![Page 31: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/31.jpg)
• Das Schlüsselwort not steht für eine logische Negation.
<link rel="stylesheet" type="text/css"
href="style.css"
media="not screen and (color)" />
![Page 32: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/32.jpg)
• 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)" />
![Page 33: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/33.jpg)
CSS Media QueriesMedienmerkmale
![Page 34: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/34.jpg)
Breite und Höhe
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
![Page 35: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/35.jpg)
Viewport mindestens500px hoch?
<link rel="stylesheet" type="text/css"
href="vertical-align.css"
media="screen and (min-height: 500px)"
/>
![Page 36: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/36.jpg)
Smartphone?
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) { … }
![Page 37: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/37.jpg)
Gerät- und Viewportbreite
• Achtung! Breite des Viewports ist häufig größer als die des Geräts selbst
<meta name="viewport"content="width=device-width">
Weitere Informationen:http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
![Page 38: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/38.jpg)
Seitenverhältnis und Ausrichtung
Merkmal min/max Beschreibungaspect-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
![Page 39: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/39.jpg)
Seitenverhältnis 16:9?
@media only screen and (device-aspect-ratio: 16/9) { … }
@media screen
and (device-aspect-ratio: 1280/720) { … }
![Page 40: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/40.jpg)
Horizontale oder vertikaleAusrichtung eines iPad?
<link … href="ipad-portrait.css" media="(min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)" />
<link … href="ipad-landscape.css" media="(min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)" />
![Page 41: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/41.jpg)
Farbmerkmale
Merkmal min/max Beschreibungcolor Ja Farbtiefe des Gerätscolor-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
![Page 42: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/42.jpg)
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)" />
![Page 43: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/43.jpg)
![Page 44: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/44.jpg)
iPhone4?
<link rel="stylesheet" type="text/css"
href="/css/retina.css"
media="only screen and
(-webkit-min-device-pixel-ratio: 2)" />
![Page 45: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/45.jpg)
Browserkompatibilität
![Page 46: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/46.jpg)
![Page 47: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/47.jpg)
Fragen?
![Page 48: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/48.jpg)
Michael Jendryschik
[email protected]@itemis.de
twitter.com/jendryschikwww.facebook.com/jendryschikwww.xing.com/profile/Michael_Jendryschik
![Page 49: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/49.jpg)
Beispiele
http://ie.microsoft.com/testdrive/HTML5/85CSS3_MediaQueries/Default.html
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-larger.html
http://hicksdesign.co.uk/
http://files.jendryschik.de/examples/wtc2010/mq.html
![Page 50: CSS Media Queries (WebTech Conference 2010)](https://reader036.vdocuments.pub/reader036/viewer/2022062405/555a6c36d8b42ae7218b4f06/html5/thumbnails/50.jpg)
Abbildungsnachweis• 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-hochleistungsfhigen-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://www.audiobooks.at/images/cover/europa/DDF_132_CD.jpg
• http://www.pm.ruhr-uni-bochum.de/imperia/md/images/pressestelle/einstein.jpg
• http://img2.fengniao.com/product/28/473/ceOnyLQihT8xg.jpg
• http://www.apple.com/iphone/
• http://wallpapers-diq.net/wallpapers/30/Firefox%2C_The_Browser%2C_Reloaded.jpg