Your SlideShare is downloading. ×

CSS3 Media Queries

1,292

Published on

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

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,292
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS3 Media Queries WDCM Dresden, 15.12.2011
  • 2. Gliederung1. Prolog2. Syntax3. Beispiele4. Epilog
  • 3. 1. PrologFirst there was the screen.
  • 4. Früher optimierte manWebseiten üblicherweise für einen Desktop-PC- Bildschirm.
  • 5. Zudem hatte man dieMöglichkeit, Zielmedienper screen, print, projection, … anzusprechen.
  • 6. Nützlich. Aber …
  • 7. http://www.flickr.com/photos/simajr/4285483549/
  • 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. Desktop
  • 10. Tablet
  • 11. Smartphone
  • 12. http://www.flickr.com/photos/libraryman/95516793/
  • 13. Moment mal: Warumwill man überhauptverschiedene Geräte ansprechen?!
  • 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. http://t3n.de/news/tablets-verkaufe-um-160-prozent-gestiegen-352008/
  • 16. http://blog.kennstdueinen.de/2011/03/mobiles-internet-in-zahlen-infografik/
  • 17. http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-200812-201112
  • 18. http://www.flickr.com/photos/7891209@N04/2951368555/
  • 19. http://www.flickr.com/photos/7891209@N04/2951368555/
  • 20. 2. SyntaxGimme some code.
  • 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. 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. 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. 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. Geht auch so:<link rel="stylesheet" href="style.css"media="screen and (min-width: 800px)">
  • 26. @media screen and (max-device-width: 480px) { /* iPhone / iPod touch */}
  • 27. @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { /* iPad (horizontal) */}
  • 28. @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { /* iPad (vertikal) */}
  • 29. @media print and (color) { /* Farbdrucker */}@media print and (monochrome) { /* Schwarzweißdrucker */}
  • 30. Media-Features• width • color• height • color-index• device-width • monochrome• device-height • resolution• orientation • scan• aspect-ratio • grid• device-aspect-ratio
  • 31. WichtigNie Media Queries ohneviewport-Meta-Angabe verwenden:<meta name="viewport" content="width=device-width">
  • 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. http://www.w3.org/TR/css3-mediaqueries/
  • 34. 3. BeispieleWhat you see is what you get.
  • 35. Demo: orientation http://www.flickr.com/photos/marfis75/5374308475/
  • 36. Schriftgröße http://trentwalton.com/2011/12/05/on-font-size/
  • 37. Demo: debugging http://xkcd.com/376/
  • 38. Demo: WWW
  • 39. 4. EpilogYou’ve officially been pimped.
  • 40. http://knowyourmeme.com/memes/xzibit-yo-dawg
  • 41. Browsersupport4+ 3.5 + 7+ 3+ 9+ http://paulirish.com/2010/high-res-browser-icons/ http://caniuse.com/#search=media
  • 42. http://www.modernizr.com/
  • 43. http://code.google.com/p/css3-mediaqueries-js/
  • 44. https://github.com/scottjehl/Respond
  • 45. CSS3 Media Queries != perpetuum mobile wööörd!
  • 46. Problem: Ladezeiten
  • 47. Problem: Kontext http://www.flickr.com/photos/noeluap/3130274669/
  • 48. Interessanter Ansatz: Gestaltungsprozessumkehren. Mobile first!
  • 49. Danke!Francesco Schwarzfrncs.co (Blog)frncs.co/+ (Google+)@isellsoap (Twitter) http://www.flickr.com/photos/ucumari/5696147028/
  • 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/

×