CSS3 Media Queries & Kick Start for Mobile
•
1 like•700 views
This document summarizes a presentation on preparing CSS and HTML for mobile devices. It discusses using liquid layouts with proportional widths and font sizes, maximizing background images, controlling the viewport with meta tags, and using media queries to target different device features like pixel density. Best practices include keeping platform styles separate, using value ranges in media queries, and maintaining a core style sheet independent of media queries.
Report
Share
CSS3 Media Queries & Kick Start for Mobile
- 1. CSS3 Lightning Talk Media Queries & Kick Start for Mobile by Jordan McCullough
- 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); }
- 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
- 19. and [(media feature)] (width: 500px) (min-width: 300px) and (max-width: 500px) and (device-pixel-ratio: 2)
- 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