CSS3 Media Queries & Kick Start for Mobile
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

CSS3 Media Queries & Kick Start for Mobile

on

  • 1,094 views

 

Statistics

Views

Total Views
1,094
Views on SlideShare
1,094
Embed Views
0

Actions

Likes
0
Downloads
19
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CSS3 Media Queries & Kick Start for Mobile Presentation 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