CSS3 Media Queries & Kick Start for Mobile

1,172 views

Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

CSS3 Media Queries & Kick Start for Mobile

  1. 1. CSS3 Lightning Talk Media Queries& Kick Start for Mobileby Jordan McCullough
  2. 2. Preparingfor Mobile
  3. 3. Liquid LayoutProportional Sizing
  4. 4. Percent dimensions for block elementsnavigation{ width: 100%; }content{ width: 80%; float: left}aside{ width: 20%; float: left}
  5. 5. Proportional EMs for font sizesh1 { font-size: 2.3em }p { font-size: 1em }article{ font-size: .9em}
  6. 6. Maximize use of background images#logo { background: url(logo.png);}
  7. 7. Retooling theHTML Viewport
  8. 8. Layout Viewport Visual Viewport
  9. 9. Layout Viewport Visual Viewport<meta nam { e=”viewport” cont ent=”w i dth=device-w i d th”>
  10. 10. As web developers, we only care about howcontent will fitin the device’s screen size
  11. 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. 12. Viewport Objectives✓ Establish expected widths for content✓ Override default reported size on mobiles ✓ Constrain user zooming and scaling
  13. 13. The Media Query
  14. 14. @media only all a
  15. 15. @media only all and [(m
  16. 16. media only all and [(media
  17. 17. ia only all and [(media fea
  18. 18. and [(media feature)]
  19. 19. and [(media feature)] (width: 500px) (min-width: 300px) and (max-width: 500px)and (device-pixel-ratio: 2)
  20. 20. Device Pixel Ratio
  21. 21. Device Pixels1 2 3 4 5 6 7 8 CSS Pixels 1 2 3 4
  22. 22. What happens if... device-pixel-ratio == 1 ImageA.png device-pixel-ratio > 1 ImageA.png
  23. 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. 24. ✓ Separate stylesheet for high density displays✓ Produce images scales by pixel-ratio✓ Write CSS-to-device px compensation
  25. 25. Best Practices
  26. 26. Best Practices#1 Keep platform rules in separate stylesheets
  27. 27. Best Practices#2 Apply media query features to value ranges using min- and max-
  28. 28. Best Practices Supply a core stylesheet that#3 maintains a independent ppearance that is of media queries
  29. 29. Thank YouEmail: jordanm@ambientideas.comTwitter: @ambientphotoOnline: http://www.ambientideas.com

×