CSS3 Media Queries
Upcoming SlideShare
Loading in...5
×
 

CSS3 Media Queries

on

  • 1,557 views

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

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

Statistics

Views

Total Views
1,557
Views on SlideShare
1,555
Embed Views
2

Actions

Likes
0
Downloads
9
Comments
0

2 Embeds 2

http://a0.twimg.com 1
http://hubot-clb-2081983768.ap-northeast-1.elb.amazonaws.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CSS3 Media Queries CSS3 Media Queries Presentation Transcript

  • CSS3 Media Queries WDCM Dresden, 15.12.2011
  • Gliederung1. Prolog2. Syntax3. Beispiele4. Epilog
  • 1. PrologFirst there was the screen. View slide
  • Früher optimierte manWebseiten üblicherweise für einen Desktop-PC- Bildschirm. View slide
  • Zudem hatte man dieMöglichkeit, Zielmedienper 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 outputdevices without changing the content itself.« W3C
  • Desktop
  • Tablet
  • Smartphone
  • http://www.flickr.com/photos/libraryman/95516793/
  • Moment mal: Warumwill man überhauptverschiedene 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.«
  • 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@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.«
  • Geht auch so:<link rel="stylesheet" href="style.css"media="screen and (min-width: 800px)">
  • @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 • color• height • color-index• device-width • monochrome• device-height • resolution• orientation • scan• aspect-ratio • grid• device-aspect-ratio
  • WichtigNie Media Queries ohneviewport-Meta-Angabe verwenden:<meta name="viewport" content="width=device-width">
  • 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.«
  • http://www.w3.org/TR/css3-mediaqueries/
  • 3. BeispieleWhat you see is what you get.
  • Demo: orientation http://www.flickr.com/photos/marfis75/5374308475/
  • Schriftgröße http://trentwalton.com/2011/12/05/on-font-size/
  • Demo: debugging http://xkcd.com/376/
  • Demo: WWW
  • 4. EpilogYou’ve officially been pimped.
  • http://knowyourmeme.com/memes/xzibit-yo-dawg
  • Browsersupport4+ 3.5 + 7+ 3+ 9+ http://paulirish.com/2010/high-res-browser-icons/ http://caniuse.com/#search=media
  • http://www.modernizr.com/
  • http://code.google.com/p/css3-mediaqueries-js/
  • https://github.com/scottjehl/Respond
  • CSS3 Media Queries != perpetuum mobile wööörd!
  • Problem: Ladezeiten
  • Problem: Kontext http://www.flickr.com/photos/noeluap/3130274669/
  • Interessanter Ansatz: Gestaltungsprozessumkehren. Mobile first!
  • Danke!Francesco Schwarzfrncs.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/