1. CSS3 Lightning Talk
Media Queries
& Kick Start for Mobile
by Jordan McCullough

2. Preparing
for Mobile

3. Liquid Layout
Proportional Sizing

4. Percent dimensions for block elements
navigation{ width: 100%; }
content{ width: 80%; float: left}
aside{ width: 20%; float: left}

5. Proportional EMs for font sizes
h1 { font-size: 2.3em }
p { font-size: 1em }
article{ font-size: .9em}

6. Maximize use of background images
#logo {
background: url(logo.png);
}

7. Retooling the
HTML Viewport

8. Layout Viewport
Visual
Viewport

9. Layout Viewport
Visual
Viewport
<meta nam
{
e=”viewport” cont
ent=”w i dth=device-w i d
th”>

10. As web developers, we only care about how
content will fit
in the device’s screen size

11. Force browser to
report width the same
as device width
<meta name="viewport"
content="width=device-width,
maximum-scale=1">
Optional:
initial-scale=1,
user-scalable=no

12. Viewport Objectives
✓ Establish expected widths for content
✓ Override default reported size on mobiles
✓ Constrain user zooming and scaling

13. The Media Query

14. @media only all a

15. @media only all and [(m

16. media only all and [(media

17. ia only all and [(media fea

18. and [(media feature)]

19. and [(media feature)]
(width: 500px)
(min-width: 300px)
and (max-width: 500px)
and (device-pixel-ratio: 2)

20. Device Pixel Ratio

21. Device Pixels
1 2 3 4 5 6 7 8
CSS Pixels
1 2 3 4

22. What happens if...
device-pixel-ratio == 1
ImageA.png
device-pixel-ratio > 1
ImageA.png

23. Maximize use of high pixel density displays
Minimize image downloads per platform
@media only all and
(min-device-pixel-ratio: 2){
#myBackground{
background: url(bg.png);
background-size: 50% 50%;
}
}

24. ✓ Separate stylesheet for high density displays
✓ Produce images scales by pixel-ratio
✓ Write CSS-to-device px compensation

25. Best Practices

26. Best Practices
#1 Keep platform rules in
separate stylesheets

27. Best Practices
#2 Apply media query features to
value ranges using min- and max-

28. Best Practices
Supply a core stylesheet that
#3 maintains a
independent
ppearance that is
of media queries

29. Thank You
Email: jordanm@ambientideas.com
Twitter: @ambientphoto
Online: http://www.ambientideas.com