15. MEDIA TYPES
@media screen { ... }
@media print { ... }
@media handheld { ... }
Let’s add some logic...
@media screen and { ... }
16. MEDIA TYPES
@media screen { ... }
@media print { ... }
@media handheld { ... }
Let’s add some logic...
@media screen and { ... }
and a feature to query
@media screen and (color) { ... }
17. MEDIA TYPES
@media screen { ... }
@media print { ... }
Hey—@media handheld { ... }
tell them some
more about logic,
Let’s add
you bastard. some logic...
@media screen and { ... }
and a feature to query
@media screen and (color) { ... }
23. logical NOT
@media not screen and (min-width: 600px)
does not evaluate as:
@media (not screen) and (min-width: 600px)
24. logical NOT
@media not screen and (min-width: 600px)
does not evaluate as:
@media (not screen) and (min-width: 600px)
does evaluate as:
@media (not (screen and (min-width: 600px)))
25. ONLY
@media only all and
(device-aspect-ratio: 16/9)
hides the CSS from
older browsers
26. ONLY
@media only all and
Enough. Enough.
(device-aspect-ratio: 16/9)
What about the
Media Features?
hides the CSS from
older browsers
27. Media Features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio
28. Media Features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio
29. Media Features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio
30. Media Features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio
31. Media Features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio
32. Media Features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio
33. Media Features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio
34. Media Features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio
35. Media Features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio
36. Media Features
likely you’ll use these most:
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio
41. Prefixed Features
How many device pixels per CSS pixel?
-webkit-[min|max]-device-pixel-ratio
[min|max]--moz-device-pixel-ratio
-o-[min|max]-device-pixel-ratio
42. Prefixed Features
How many device pixels per CSS pixel?
-webkit-[min|max]-device-pixel-ratio
[min|max]--moz-device-pixel-ratio
-o-[min|max]-device-pixel-ratio
-webkit-min-device-pixel-ratio: 1.5
-o-min-device-pixel-ratio: 3/2
49. Meta viewport
<meta name="viewport"
content="width=device-width">
50. Meta viewport
<meta name="viewport"
content="width=device-width">
use that in combination with WIDTH
@media screen and (max-width: 320px) {
div {
width: 80%;
}
}
51. Meta viewport
<meta name="viewport"
content="width=device-width,
initial-scale=1">
use that in combination with WIDTH
@media screen and (max-width: 320px) {
div {
width: 80%;
}
}