Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Intro to Responsive Design
Search
Dan Barber
August 16, 2012
Design
4
470
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
Design Eye for the Developer Guy
danbarber
21
19k
Other Decks in Design
See All in Design
Night Shift concept 9/15/2024
cpineda57
0
740
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
490
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
260
Картирование процесса фасилитация стратсессий с Картой гипотез при помощи Карты процесса-опыта
ashapiro
0
390
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
160
アフォーダンスとシグニファイア
ryokanakai
0
300
Yahoo Newsletter Clicker Template
xuechunwu
0
290
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
2k
Tataki Ryu
olgastoryboard
0
140
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
280
Cardápio - Caraguá A Gosto 2024 - De 01/08 a 08/09/2024
caraguatatuba
0
5.9k
Dreamia
elsh
0
150
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Practical Orchestrator
shlominoach
186
10k
Statistics for Hackers
jakevdp
796
220k
Side Projects
sachag
452
42k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Music & Morning Musume
bryan
46
6.1k
KATA
mclloyd
29
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Become a Pro
speakerdeck
PRO
24
5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Building Your Own Lightsaber
phodgson
102
6.1k
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