Your SlideShare is downloading. ×
0
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
CSS3 Media Queries & Kick Start for Mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS3 Media Queries & Kick Start for Mobile

826

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
826
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS3 Lightning Talk Media Queries& Kick Start for Mobileby Jordan McCullough
  • 2. Preparingfor Mobile
  • 3. Liquid LayoutProportional Sizing
  • 4. Percent dimensions for block elementsnavigation{ width: 100%; }content{ width: 80%; float: left}aside{ width: 20%; float: left}
  • 5. Proportional EMs for font sizesh1 { 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 theHTML 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 howcontent will fitin 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 Pixels1 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 YouEmail: jordanm@ambientideas.comTwitter: @ambientphotoOnline: http://www.ambientideas.com

×