Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Responsive Design

35f038911d27b705a68cd3b1af328f2f?s=47 Dan Barber
August 16, 2012

Intro to Responsive Design

An introduction to responsive design, what it is, why it exists and how to implement it.

35f038911d27b705a68cd3b1af328f2f?s=128

Dan Barber

August 16, 2012
Tweet

Transcript

  1. Introduction to Responsive Design

  2. Why Responsive?

  3. None
  4. Best Viewed at 1024x768

  5. None
  6. Flexible Grid

  7. 960px 140px 20px

  8. max-width: 960px 14.5833...% 2.0833...%

  9. Flexible Media

  10. img { max-width: 100%; }

  11. img, embed, object, video { max-width: 100%; }

  12. Media Queries

  13. @media screen and (min-width: 680px) { ... }

  14. @media only screen and (min-device-pixel-ratio: 2) { ... }

  15. <meta name=”viewport” content=”initial-scale=1.0, width=device-width” />

  16. Showcase

  17. None
  18. None
  19. None
  20. None
  21. Fin