Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Michael Jendryschik | itemis AG CSS Media Queries Auf Browser und Geräte reagieren
Michael Jendryschik <ul><li>Konzipiert und entwickelt Websites, schreibt und spricht darüber </li></ul><ul><li>http://jend...
<ul><li>Es gibt verschiedene Möglichkeiten, den Geltungsbereich von CSS auf bestimmte Medien einzuschränken. </li></ul>
aural  für Sprachbrowser
braille  für Geräte mit Braillezeile
embossed  für Brailledrucker
handheld  für Handcomputer und Mobiltelefone
print  für Drucker
projection  für Projektoren
screen  für Monitore
tty  für Ausgabemedien mit Festbreitenschrift
tv  für Fernseher
CSS-Medientypen  Typ Medium all alle Geräte aural Sprachbrowser braille Ausgabegeräte mit Braillezeile embossed Brailledru...
<ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot;  media=&quot;screen&quot;  /...
<ul><li>Mit CSS Media Queries ist es möglich, die Einbindung von CSS davon abhängig zu machen, ob ein Medium oder Ausgabeg...
Microsoft IE Test Drive
<ul><li>@media (min-width: 950px) { </li></ul><ul><li>/* Regeln für breite Browserfenster */ </li></ul><ul><li>} </li></ul...
A List Apart Artikelbeispiel
<ul><li>@media screen and (max-width: 600px) { </li></ul><ul><li>.mast, </li></ul><ul><li>.intro, </li></ul><ul><li>.main,...
Jon Hicks
<ul><li>@media screen and (max-width: 500px) { … } </li></ul><ul><li>@media screen and (max-width: 800px) { … } </li></ul>...
kleines iPhone-Beispiel <ul><li><ol> </li></ul><ul><li><li class=&quot;ready&quot;>Fertig?</li> </li></ul><ul><li><li clas...
kleines iPhone-Beispiel <ul><li>@media only screen  and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape) ...
kleines iPhone-Beispiel <ul><li>@media only screen  and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait) {...
 
CSS Media Queries Grundlagen und Syntax
<ul><li>Media Queries sind logische Ausdrücke, die die Angabe von Medientypen und bestimmten Medienmerkmalen miteinander v...
Bezeichnung Beispiel Media Query screen and (max-width: 300px) Medientyp screen   and (max-width: 300px) Verknüpfung scree...
<ul><li>Das Schlüsselwort  and  drückt ein logisches Und aus. </li></ul><ul><li>screen  and  (max-width: 300px) </li></ul>...
<ul><li>Ein Komma steht für ein logisches Oder. </li></ul><ul><li>@import url(&quot;style.css&quot;) screen ,  projection;...
<ul><li>Das Schlüsselwort  not  steht für eine logische Negation. </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=...
<ul><li>Das Schlüsselwort  only  ist ein Workaround für veraltete Browser, die mit Media Queries nicht umzugehen wissen </...
CSS Media Queries Medienmerkmale
Breite und Höhe Merkmal min/max Beschreibung width Ja Breite der Anzeigefläche height Ja Höhe der Anzeigefläche device-wid...
Viewport mindestens 500px hoch? <ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; </li></ul><ul><li>href=...
Smartphone? <ul><li>@media only screen </li></ul><ul><li>and ( min-device-width: 320px )  </li></ul><ul><li>and ( max-devi...
Gerät- und Viewportbreite <ul><li>Achtung! Breite des Viewports ist häufig größer als die des Geräts selbst </li></ul><ul>...
Seitenverhältnis und Ausrichtung Merkmal min/max Beschreibung aspect-ratio Ja Verhältnis der Merkmale  width  und  height ...
Seitenverhältnis 16:9? <ul><li>@media only screen   and ( device-aspect-ratio: 16/9 ) { … } </li></ul><ul><li>@media scree...
Horizontale oder vertikale Ausrichtung eines iPad? <ul><li><link … href=&quot;ipad-portrait.css&quot; </li></ul><ul><li>me...
Farbmerkmale Merkmal min/max Beschreibung color Ja Farbtiefe des Geräts color-index Ja Anzahl der Einträge in der Farb-Loo...
Schwarzweiß- oder Farbdrucker? <ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; </li></ul><ul><li>href=&...
 
iPhone4? <ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; </li></ul><ul><li>href=&quot;/css/retina.css&q...
Browserkompatibilität
 
Fragen?
Michael Jendryschik <ul><li>[email_address] </li></ul><ul><li>[email_address] </li></ul><ul><li>twitter.com/jendryschik </...
Beispiele <ul><li>http://ie.microsoft.com/testdrive/HTML5/85CSS3_MediaQueries/Default.html </li></ul><ul><li>http://www.al...
Abbildungsnachweis <ul><li>http://www.digitale-chancen.de/transfer/assets/468.jpg </li></ul><ul><li>http://ceipntrasradela...
Upcoming SlideShare
Loading in …5
×

CSS Media Queries (WebTech Conference 2010)

8,897 views

Published on

Mit CSS3 Media Queries ist es möglich, die Einbindung von CSS nicht nur von einem bestimmten Medium abhängig zu machen, sondern auch davon, ob das Medium oder Ausgabegerät bestimmte Merkmale aufweist oder nicht. Webautoren können so beispielsweise auf die Breite des Browserfensters reagieren und ein Spaltenlayout auflösen, wenn die Breite für die mehrspaltige Darstellung nicht mehr ausreicht. Oder sie können spezielle Stylesheets für die Darstellung auf dem iPhone oder iPad bereitstellen, abhängig davon, wie das Gerät in der Hand gehalten wird. Dieser Vortrag führt ein in die Funktionsweise von CSS Media Queries und zeigt aktuelle Anwendungsbeispiele, die in (fast) allen aktuellen Browsern funktionieren.

Published in: Technology

CSS Media Queries (WebTech Conference 2010)

  1. 1. Michael Jendryschik | itemis AG CSS Media Queries Auf Browser und Geräte reagieren
  2. 2. Michael Jendryschik <ul><li>Konzipiert und entwickelt Websites, schreibt und spricht darüber </li></ul><ul><li>http://jendryschik.de </li></ul><ul><li>Leiter Webentwicklung </li></ul><ul><li>http://www.itemis.de </li></ul><ul><li>Webkraut </li></ul><ul><li>http://www.webkrauts.de </li></ul>
  3. 3. <ul><li>Es gibt verschiedene Möglichkeiten, den Geltungsbereich von CSS auf bestimmte Medien einzuschränken. </li></ul>
  4. 4. aural für Sprachbrowser
  5. 5. braille für Geräte mit Braillezeile
  6. 6. embossed für Brailledrucker
  7. 7. handheld für Handcomputer und Mobiltelefone
  8. 8. print für Drucker
  9. 9. projection für Projektoren
  10. 10. screen für Monitore
  11. 11. tty für Ausgabemedien mit Festbreitenschrift
  12. 12. tv für Fernseher
  13. 13. 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
  14. 14. <ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; media=&quot;screen&quot; /> </li></ul><ul><li>@import url(&quot;style.css&quot;) screen ; </li></ul><ul><li>@media print { div#header, div#sidebar, div#footer { display: none; } </li></ul><ul><li>} </li></ul>
  15. 15. <ul><li>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. </li></ul>
  16. 16. Microsoft IE Test Drive
  17. 17. <ul><li>@media (min-width: 950px) { </li></ul><ul><li>/* Regeln für breite Browserfenster */ </li></ul><ul><li>} </li></ul><ul><li>@media (min-width: 450px) and (max-width: 950px) { </li></ul><ul><li>  /* Regeln für Netbooks */ </li></ul><ul><li>} </li></ul><ul><li>@media (max-width: 450px) { </li></ul><ul><li>/* Regeln für mobile Geräte */ </li></ul><ul><li>} </li></ul>
  18. 18. A List Apart Artikelbeispiel
  19. 19. <ul><li>@media screen and (max-width: 600px) { </li></ul><ul><li>.mast, </li></ul><ul><li>.intro, </li></ul><ul><li>.main, </li></ul><ul><li>.footer { </li></ul><ul><li>float: none; </li></ul><ul><li>width: auto; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  20. 20. Jon Hicks
  21. 21. <ul><li>@media screen and (max-width: 500px) { … } </li></ul><ul><li>@media screen and (max-width: 800px) { … } </li></ul><ul><li>@media screen and (min-width: 1024px) { … } </li></ul><ul><li>@media handheld and (max-device-width: 480px), </li></ul><ul><li>screen and (max-device-width: 480px), </li></ul><ul><li>screen and (max-width: 600px) { … } </li></ul><ul><li>@media screen and (min-width: 920px) { … } </li></ul><ul><li>@media screen and (min-width: 1350px) { … } </li></ul><ul><li>@media screen and (min-width: 1500px) { … } </li></ul><ul><li>@media only screen and (max-device-width: 480px) { … } </li></ul><ul><li>@media only screen and (min-device-width: 768px) </li></ul><ul><li>and (max-device-width: 1024px) { … } </li></ul>
  22. 22. kleines iPhone-Beispiel <ul><li><ol> </li></ul><ul><li><li class=&quot;ready&quot;>Fertig?</li> </li></ul><ul><li><li class=&quot;go&quot;>Los!</li> </li></ul><ul><li></ol> </li></ul>
  23. 23. kleines iPhone-Beispiel <ul><li>@media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { </li></ul><ul><li>body { background-color: yellow; } </li></ul><ul><li>li.go { display: none; } </li></ul><ul><li>} </li></ul>
  24. 24. kleines iPhone-Beispiel <ul><li>@media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { </li></ul><ul><li>body { color: white; background-color: green; </li></ul><ul><li>} </li></ul><ul><li>li.ready { display: none; } </li></ul><ul><li>} </li></ul>
  25. 26. CSS Media Queries Grundlagen und Syntax
  26. 27. <ul><li>Media Queries sind logische Ausdrücke, die die Angabe von Medientypen und bestimmten Medienmerkmalen miteinander verknüpfen. </li></ul>
  27. 28. 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 )
  28. 29. <ul><li>Das Schlüsselwort and drückt ein logisches Und aus. </li></ul><ul><li>screen and (max-width: 300px) </li></ul><ul><li>(min-width: 450px) and (max-width: 950px) </li></ul>
  29. 30. <ul><li>Ein Komma steht für ein logisches Oder. </li></ul><ul><li>@import url(&quot;style.css&quot;) screen , projection; </li></ul><ul><li><link rel=&quot;stylesheet&quot; </li></ul><ul><li>type=&quot;text/css&quot; href=&quot;style.css&quot; </li></ul><ul><li>media=&quot;screen and (min-width: 800px) , </li></ul><ul><li>projection and (min-width: 800px)&quot; /> </li></ul>
  30. 31. <ul><li>Das Schlüsselwort not steht für eine logische Negation. </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; </li></ul><ul><li>href=&quot;style.css&quot; </li></ul><ul><li>media=&quot; not screen and (color)&quot; /> </li></ul>
  31. 32. <ul><li>Das Schlüsselwort only ist ein Workaround für veraltete Browser, die mit Media Queries nicht umzugehen wissen </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; </li></ul><ul><li>href=&quot;style.css&quot; </li></ul><ul><li>media=&quot; only screen and (color)&quot; /> </li></ul>
  32. 33. CSS Media Queries Medienmerkmale
  33. 34. 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
  34. 35. Viewport mindestens 500px hoch? <ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; </li></ul><ul><li>href=&quot;vertical-align.css&quot; </li></ul><ul><li>media=&quot;screen and ( min-height: 500px )&quot; </li></ul><ul><li>/> </li></ul>
  35. 36. Smartphone? <ul><li>@media only screen </li></ul><ul><li>and ( min-device-width: 320px ) </li></ul><ul><li>and ( max-device-width: 480px ) { … } </li></ul>
  36. 37. Gerät- und Viewportbreite <ul><li>Achtung! Breite des Viewports ist häufig größer als die des Geräts selbst </li></ul><ul><li><meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;> </li></ul><ul><li>Weitere Informationen: </li></ul><ul><li>http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html </li></ul>
  37. 38. Seitenverhältnis und Ausrichtung 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
  38. 39. Seitenverhältnis 16:9? <ul><li>@media only screen and ( device-aspect-ratio: 16/9 ) { … } </li></ul><ul><li>@media screen </li></ul><ul><li>and ( device-aspect-ratio: 1280/720 ) { … } </li></ul>
  39. 40. Horizontale oder vertikale Ausrichtung eines iPad? <ul><li><link … href=&quot;ipad-portrait.css&quot; </li></ul><ul><li>media=&quot;(min-device-width: 768px) </li></ul><ul><li>and (max-device-width: 1024px) </li></ul><ul><li>and ( orientation: portrait )&quot; /> </li></ul><ul><li><link … href=&quot;ipad-landscape.css&quot; </li></ul><ul><li>media=&quot;(min-device-width: 768px) </li></ul><ul><li>and (max-device-width: 1024px) </li></ul><ul><li>and ( orientation: landscape )&quot; /> </li></ul>
  40. 41. Farbmerkmale 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
  41. 42. Schwarzweiß- oder Farbdrucker? <ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; </li></ul><ul><li>href=&quot;print-color.css&quot; </li></ul><ul><li>media=&quot;print and ( color )&quot; /> </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; </li></ul><ul><li>href=&quot;print-monochrome.css&quot; </li></ul><ul><li>media=&quot;print and ( monochrome )&quot; /> </li></ul>
  42. 44. iPhone4? <ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; </li></ul><ul><li>href=&quot;/css/retina.css&quot; </li></ul><ul><li>media=&quot;only screen and </li></ul><ul><li>( -webkit-min-device-pixel-ratio: 2 )&quot; /> </li></ul>
  43. 45. Browserkompatibilität
  44. 47. Fragen?
  45. 48. Michael Jendryschik <ul><li>[email_address] </li></ul><ul><li>[email_address] </li></ul><ul><li>twitter.com/jendryschik </li></ul><ul><li>www.facebook.com/jendryschik </li></ul><ul><li>www.xing.com/profile/Michael_Jendryschik </li></ul>
  46. 49. Beispiele <ul><li>http://ie.microsoft.com/testdrive/HTML5/85CSS3_MediaQueries/Default.html </li></ul><ul><li>http://www.alistapart.com/d/responsive-web-design/ex/ex-site-larger.html </li></ul><ul><li>http://hicksdesign.co.uk/ </li></ul><ul><li>http://files.jendryschik.de/examples/wtc2010/mq.html </li></ul>
  47. 50. Abbildungsnachweis <ul><li>http://www.digitale-chancen.de/transfer/assets/468.jpg </li></ul><ul><li>http://ceipntrasradelapiedad.files.wordpress.com/2010/03/braille.jpg </li></ul><ul><li>http://gadgets.boingboing.net/Palm-Pre-Disassembled.jpg </li></ul><ul><li>http://upload.wikimedia.org/wikipedia/commons/d/dc/Westermann_Druckerei_1890.png </li></ul><ul><li>http://www.infocus.rbt-pressroom.eu/de/download/der-heimkino-projektor-sp8602-kommt-vielen-hochleistungsfhigen-eigenschaften-auf-den-markt-4.jpg </li></ul><ul><li>http://upload.wikimedia.org/wikipedia/commons/2/2c/Monitor_in_gutter.jpg </li></ul><ul><li>http://cmsdata.iucn.org/img/original/iberian_lynx_by_antonio_rivas.jpg </li></ul><ul><li>http://www.comcast.com/MediaLibrary/1/1/About/PressRoom/Images/LogoAndMediaLibrary/Photography/CableNetworks/Teletubbies-Group2.jpg </li></ul><ul><li>http://www.audiobooks.at/images/cover/europa/DDF_132_CD.jpg </li></ul><ul><li>http://www.pm.ruhr-uni-bochum.de/imperia/md/images/pressestelle/einstein.jpg </li></ul><ul><li>http://img2.fengniao.com/product/28/473/ceOnyLQihT8xg.jpg </li></ul><ul><li>http://www.apple.com/iphone/ </li></ul><ul><li>http://wallpapers-diq.net/wallpapers/30/Firefox%2C_The_Browser%2C_Reloaded.jpg </li></ul>

×