CSS3 Media Queries

1,615 views

Published on

Ein kleiner Überblick über Syntax und Funktionalität von CSS3 Media Queries.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,615
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS3 Media Queries

  1. 1. CSS3 Media Queries WDCM Dresden, 15.12.2011
  2. 2. Gliederung1. Prolog2. Syntax3. Beispiele4. Epilog
  3. 3. 1. PrologFirst there was the screen.
  4. 4. Früher optimierte manWebseiten üblicherweise für einen Desktop-PC- Bildschirm.
  5. 5. Zudem hatte man dieMöglichkeit, Zielmedienper 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 outputdevices 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: Warumwill man überhauptverschiedene 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. SyntaxGimme 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. WichtigNie Media Queries ohneviewport-Meta-Angabe verwenden:<meta name="viewport" content="width=device-width">
  32. 32. WichtigNie Media Queries ohneviewport-Meta-Angabe verwenden:<meta name="viewport" content="width=device-width">»Setze die Viewport-Breite auf dietatsächliche Breite des Gerätedisplays.«
  33. 33. http://www.w3.org/TR/css3-mediaqueries/
  34. 34. 3. BeispieleWhat 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. EpilogYou’ve officially been pimped.
  40. 40. http://knowyourmeme.com/memes/xzibit-yo-dawg
  41. 41. Browsersupport4+ 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: Gestaltungsprozessumkehren. Mobile first!
  49. 49. Danke!Francesco Schwarzfrncs.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/

×