Diese Präsentation wurde erfolgreich gemeldet.

CSS3 Media Queries

0

Teilen

Wird geladen in …3
×
1 von 52
1 von 52

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

CSS3 Media Queries

  1. 1. CSS3 Media Queries WDCM Dresden, 15.12.2011
  2. 2. Gliederung 1. Prolog 2. Syntax 3. Beispiele 4. Epilog
  3. 3. 1. Prolog First there was the screen.
  4. 4. Früher optimierte man Webseiten üblicherweise für einen Desktop-PC- Bildschirm.
  5. 5. Zudem hatte man die Möglichkeit, Zielmedien per screen, print, projection, … anzusprechen.
  6. 6. Nützlich. Aber …
  7. 7. http://www.flickr.com/photos/simajr/4285483549/
  8. 8. Heute geht mehr! »By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.« W3C
  9. 9. Desktop
  10. 10. Tablet
  11. 11. Smartphone
  12. 12. http://www.flickr.com/photos/libraryman/95516793/
  13. 13. Moment mal: Warum will man überhaupt verschiedene Geräte ansprechen?!
  14. 14. • In 3 Jahren wurden über 200 Millionen Android-Geräte aktiviert. (täglich kommen 550.000 hinzu) • In 5 Jahren wurden über 250 Millionen iOS-Geräte verkauft. • Apple verkauft mehr iPads als Dell PCs. • Tablets-Verkäufe 2011 in D. im Vergleich zum Vorjahr um über 160 % gestiegen.
  15. 15. http://t3n.de/news/tablets-verkaufe-um-160-prozent-gestiegen-352008/
  16. 16. http://blog.kennstdueinen.de/2011/03/mobiles-internet-in-zahlen-infografik/
  17. 17. http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-200812-201112
  18. 18. http://www.flickr.com/photos/7891209@N04/2951368555/
  19. 19. http://www.flickr.com/photos/7891209@N04/2951368555/
  20. 20. 2. Syntax Gimme some code.
  21. 21. @media screen and (max-width: 800px) { /* Awesome CSS code … */ } »Führe CSS aus, wenn Medientyp screen unterstützt wird und das Browserfenster kleiner als 800 Pixel breit ist.«
  22. 22. Medientyp @media screen and (max-width: 800px) { /* Awesome CSS code … */ } »Führe CSS aus, wenn Medientyp screen unterstützt wird und das Browserfenster kleiner als 800 Pixel breit ist.«
  23. 23. Verknüpfung @media screen and (max-width: 800px) { /* Awesome CSS code … */ } »Führe CSS aus, wenn Medientyp screen unterstützt wird und das Browserfenster kleiner als 800 Pixel breit ist.«
  24. 24. Ausdruck @media screen and (max-width: 800px) { /* Awesome CSS code … */ } »Führe CSS aus, wenn Medientyp screen unterstützt wird und das Browserfenster kleiner als 800 Pixel breit ist.«
  25. 25. Geht auch so: <link rel="stylesheet" href="style.css" media="screen and (min-width: 800px)">
  26. 26. @media screen and (max-device-width: 480px) { /* iPhone / iPod touch */ }
  27. 27. @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { /* iPad (horizontal) */ }
  28. 28. @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { /* iPad (vertikal) */ }
  29. 29. @media print and (color) { /* Farbdrucker */ } @media print and (monochrome) { /* Schwarzweißdrucker */ }
  30. 30. Media-Features • width • color • height • color-index • device-width • monochrome • device-height • resolution • orientation • scan • aspect-ratio • grid • device-aspect-ratio
  31. 31. Wichtig Nie Media Queries ohne viewport-Meta-Angabe verwenden: <meta name="viewport" content="width=device-width">
  32. 32. Wichtig Nie Media Queries ohne viewport-Meta-Angabe verwenden: <meta name="viewport" content="width=device-width"> »Setze die Viewport-Breite auf die tatsächliche Breite des Gerätedisplays.«
  33. 33. http://www.w3.org/TR/css3-mediaqueries/
  34. 34. 3. Beispiele What you see is what you get.
  35. 35. Demo: orientation http://www.flickr.com/photos/marfis75/5374308475/
  36. 36. Schriftgröße http://trentwalton.com/2011/12/05/on-font-size/
  37. 37. Demo: debugging http://xkcd.com/376/
  38. 38. Demo: WWW
  39. 39. 4. Epilog You’ve officially been pimped.
  40. 40. http://knowyourmeme.com/memes/xzibit-yo-dawg
  41. 41. Browsersupport 4+ 3.5 + 7+ 3+ 9+ http://paulirish.com/2010/high-res-browser-icons/ http://caniuse.com/#search=media
  42. 42. http://www.modernizr.com/
  43. 43. http://code.google.com/p/css3-mediaqueries-js/
  44. 44. https://github.com/scottjehl/Respond
  45. 45. CSS3 Media Queries != perpetuum mobile wööörd!
  46. 46. Problem: Ladezeiten
  47. 47. Problem: Kontext http://www.flickr.com/photos/noeluap/3130274669/
  48. 48. Interessanter Ansatz: Gestaltungsprozess umkehren. Mobile first!
  49. 49. Danke! Francesco Schwarz frncs.co (Blog) frncs.co/+ (Google+) @isellsoap (Twitter) http://www.flickr.com/photos/ucumari/5696147028/
  50. 50. Quellen, Links & Co. • http://www.webkrauts.de/2011/12/12/der-aktuelle-stand-der-dinge-im-mobile-web-development/ • http://24ways.org/2011/adaptive-images-for-responsive-designs-again • http://www.elmastudio.de/webdesign/was-konnen-css3-media-queries-wirklich-leisten/ • http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ • http://kulturbanause.de/2011/04/websites-mit-css3-media-queries-fur-iphone-ipad-android-co-optimieren/ • http://www.asymco.com/2011/12/02/the-big-bang-theory-of-computing/ • http://de.engadget.com/2011/11/16/google-200-millionen-android-gerate-aktiviert-taglich-kommen-5/ • http://www.slideshare.net/jameswillweb/css3-media-queries-mobile-elixir-or-css-snake-oil • http://www.slideshare.net/jendryschik/css-media-queries-4685524 • http://johanbrook.com/design/css/debugging-css-media-queries/ • http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ • http://mediaqueri.es/ • http://coding.smashingmagazine.com/2011/08/10/techniques-for-gracefully-degrading-media-queries/

×