CSS3 Media QueriesWDCM Dresden, 15.12.2011
Gliederung
1. Prolog
2. Syntax
3. Beispiele
4. Epilog
1. PrologFirst there was the screen.
Früher optimierte man Webseiten üblicherweise
für einen Desktop-PC-Bildschirm.
Zudem hatte man die Möglichkeit, Zielmedien per screen, print, projection,
… anzusprechen.
Nützlich. Aber …
http://www.flickr.com/photos/simajr/4285483549/
Heute geht mehr!
»By using media queries, presentations can be tailored to a specific range of output
devices without changing the content itself.«
W3C
Desktop
Tablet
Smartphone
http://www.flickr.com/photos/libraryman/95516793/
Moment mal: Warum will man überhaupt verschiedene Geräte
ansprechen?!
• 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.
http://t3n.de/news/tablets-verkaufe-um-160-prozent-gestiegen-352008/
http://blog.kennstdueinen.de/2011/03/mobiles-internet-in-zahlen-infografik/
http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-200812-201112
http://www.flickr.com/photos/7891209@N04/2951368555/
http://www.flickr.com/photos/7891209@N04/2951368555/
2. SyntaxGimme some code.
@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.«
@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.«
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.«
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.«
Ausdruck
<link rel="stylesheet" href="style.css" media="screen and (min-width: 800px)">
Geht auch so:
@media screen and (max-device-width: 480px) {
/* iPhone / iPod touch */
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
/* iPad (horizontal) */
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
/* iPad (vertikal) */
}
@media print and (color) {
/* Farbdrucker */
}
@media print and (monochrome) {
/* Schwarzweißdrucker */
}
Media-Features• width
• height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
• scan
• grid
<meta name="viewport" content="width=device-width">
WichtigNie Media Queries ohne viewport-Meta-Angabe verwenden:
<meta name="viewport" content="width=device-width">
WichtigNie Media Queries ohne viewport-Meta-Angabe verwenden:
»Setze die Viewport-Breite auf die tatsächliche Breite des Gerätedisplays.«
http://www.w3.org/TR/css3-mediaqueries/
3. BeispieleWhat you see is what you get.
Demo: orientationhttp://www.flickr.com/photos/marfis75/5374308475/
Schriftgrößehttp://trentwalton.com/2011/12/05/on-font-size/
Demo: WWW
4. EpilogYou’ve officially been pimped.
http://knowyourmeme.com/memes/xzibit-yo-dawg
Browsersupport
4 + 3.5 + 7 + 3 + 9 +
http://paulirish.com/2010/high-res-browser-icons/http://caniuse.com/#search=media
http://code.google.com/p/css3-mediaqueries-js/
https://github.com/scottjehl/Respond
CSS3 Media Queries!=
perpetuum mobile
wööörd!
Problem: Ladezeiten
Problem: Kontexthttp://www.flickr.com/photos/noeluap/3130274669/
Interessanter Ansatz: Gestaltungsprozess
umkehren. Mobile first!
Danke!
Francesco Schwarz
frncs.co (Blog)
frncs.co/+ (Google+)
@isellsoap (Twitter)
http://www.flickr.com/photos/ucumari/5696147028/
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/