Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Intro to Responsive Design
Dan Barber
August 16, 2012
Design
4
410
Intro to Responsive Design
An introduction to responsive design, what it is, why it exists and how to implement it.
Dan Barber
August 16, 2012
Tweet
Share
More Decks by Dan Barber
See All by Dan Barber
danbarber
21
18k
Other Decks in Design
See All in Design
mauricioangulo
0
150
johattori
0
230
mollysart
0
300
vincentwu
PRO
0
100
mashusha
1
220
danielblake
0
210
joelmayer
0
410
mollysart
0
200
vhm
0
160
misty_marsden
PRO
0
510
seathinner
2
190
3mp
1
120
Featured
See All Featured
samlambert
237
10k
roundedbygravity
242
21k
reverentgeek
27
2.1k
keathley
20
760
swwweet
206
6.9k
bryan
32
3.5k
aarron
258
36k
danielanewman
2
550
pauljervisheath
195
15k
hannesfritz
28
970
lauravandoore
10
1.7k
addyosmani
494
110k
Transcript
Introduction to Responsive Design
Why Responsive?
None
Best Viewed at 1024x768
None
Flexible Grid
960px 140px 20px
max-width: 960px 14.5833...% 2.0833...%
Flexible Media
img { max-width: 100%; }
img, embed, object, video { max-width: 100%; }
Media Queries
@media screen and (min-width: 680px) { ... }
@media only screen and (min-device-pixel-ratio: 2) { ... }
<meta name=”viewport” content=”initial-scale=1.0, width=device-width” />
Showcase
None
None
None
None
Fin