8. Heute geht mehr!
»By using media queries, presentations can
be tailored to a specific range of output
devices without changing the content itself.«
W3C
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.
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)">
31. Wichtig
Nie Media Queries ohne
viewport-Meta-Angabe verwenden:
<meta name="viewport"
content="width=device-width">
32. Wichtig
Nie Media Queries ohne
viewport-Meta-Angabe verwenden:
<meta name="viewport"
content="width=device-width">
»Setze die Viewport-Breite auf die
tatsächliche Breite des Gerätedisplays.«