Post on 02-Nov-2014
description
transcript
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/