CSS Media Queries (WebTech Conference 2010)
Als PPT, PDF herunterladen5 gefällt mir5,053 aufrufe
Das Dokument erläutert die Nutzung von CSS Media Queries zur Anpassung von Webseiten an verschiedene Ausgabemedien wie Drucker, Monitore und mobile Geräte. Es beschreibt die Grundlagen, die Syntax und zeigt Beispiele für verschiedene Anwendungen von Media Queries, um spezifische Styles je nach Geräteeigenschaften zu definieren. Zudem werden wichtige Medienmerkmale und deren Nutzung zur gezielten Anpassung von Webinhalten erklärt.
![Michael Jendryschik [email_address] [email_address] twitter.com/jendryschik www.facebook.com/jendryschik www.xing.com/profile/Michael_Jendryschik](https://image.slidesharecdn.com/cssmediaqueries-101017105149-phpapp02/85/CSS-Media-Queries-WebTech-Conference-2010-48-320.jpg)
CSS Media Queries (WebTech Conference 2010)
- 1. Michael Jendryschik | itemis AG CSS Media Queries Auf Browser und Geräte reagieren
- 2. Michael Jendryschik Konzipiert und entwickelt Websites, schreibt und spricht darüber http://jendryschik.de Leiter Webentwicklung http://www.itemis.de Webkraut http://www.webkrauts.de
- 3. Es gibt verschiedene Möglichkeiten, den Geltungsbereich von CSS auf bestimmte Medien einzuschränken.
- 4. aural für Sprachbrowser
- 5. braille für Geräte mit Braillezeile
- 6. embossed für Brailledrucker
- 7. handheld für Handcomputer und Mobiltelefone
- 8. print für Drucker
- 9. projection für Projektoren
- 10. screen für Monitore
- 11. tty für Ausgabemedien mit Festbreitenschrift
- 12. tv für Fernseher
- 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. <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; } }
- 15. 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.
- 16. Microsoft IE Test Drive
- 17. @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 */ }
- 18. A List Apart Artikelbeispiel
- 19. @media screen and (max-width: 600px) { .mast, .intro, .main, .footer { float: none; width: auto; } }
- 20. Jon Hicks
- 21. @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) { … }
- 22. kleines iPhone-Beispiel <ol> <li class="ready">Fertig?</li> <li class="go">Los!</li> </ol>
- 23. kleines iPhone-Beispiel @media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { body { background-color: yellow; } li.go { display: none; } }
- 24. 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; } }
- 26. CSS Media Queries Grundlagen und Syntax
- 27. Media Queries sind logische Ausdrücke, die die Angabe von Medientypen und bestimmten Medienmerkmalen miteinander verknüpfen.
- 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 )
- 29. Das Schlüsselwort and drückt ein logisches Und aus. screen and (max-width: 300px) (min-width: 450px) and (max-width: 950px)
- 30. 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)" />
- 31. Das Schlüsselwort not steht für eine logische Negation. <link rel="stylesheet" type="text/css" href="style.css" media=" not screen and (color)" />
- 32. 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)" />
- 33. CSS Media Queries Medienmerkmale
- 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
- 35. Viewport mindestens 500px hoch? <link rel="stylesheet" type="text/css" href="vertical-align.css" media="screen and ( min-height: 500px )" />
- 36. Smartphone? @media only screen and ( min-device-width: 320px ) and ( max-device-width: 480px ) { … }
- 37. 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
- 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
- 39. Seitenverhältnis 16:9? @media only screen and ( device-aspect-ratio: 16/9 ) { … } @media screen and ( device-aspect-ratio: 1280/720 ) { … }
- 40. Horizontale oder vertikale Ausrichtung 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 )" />
- 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
- 42. 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 )" />
- 44. iPhone4? <link rel="stylesheet" type="text/css" href="/css/retina.css" media="only screen and ( -webkit-min-device-pixel-ratio: 2 )" />
- 47. Fragen?
- 48. Michael Jendryschik [email_address] [email_address] twitter.com/jendryschik www.facebook.com/jendryschik www.xing.com/profile/Michael_Jendryschik
- 49. 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
- 50. 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