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
480
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
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
450
Cyber Heart Online Book
hjnasby
0
150
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
390
The Spectacular Lies of Maps
axbom
PRO
1
180
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
140
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
390
AIで加速するアクセシビリティのこれから
magi1125
3
590
Bulletproof Design System with TypeScript
takanorip
6
3.7k
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
9k
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
180
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
480
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
We Have a Design System, Now What?
morganepeng
53
7.7k
Adopting Sorbet at Scale
ufuk
77
9.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Practical Orchestrator
shlominoach
189
11k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Cult of Friendly URLs
andyhume
79
6.5k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Scaling GitHub
holman
461
140k
What's in a price? How to price your products and services
michaelherold
246
12k
How to train your dragon (web standard)
notwaldorf
96
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