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
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
510
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
430
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
0
1.2k
CMS管理画面のアクセシビリティ
magi1125
6
2k
Bulletproof Design System with TypeScript
takanorip
6
3.5k
AI動画生成ガチャ紹介
piyo7
1
110
Goodpatch Tour💙 / We are hiring!
goodpatch
31
860k
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
620
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
クライアントワークにおける UXリサーチの実践
kozotaira
0
690
Storyboard Honey
rocioparronrubio
0
270
Liquid Iron
mcduckyart
1
110
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Adopting Sorbet at Scale
ufuk
77
9.4k
It's Worth the Effort
3n
185
28k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Optimizing for Happiness
mojombo
379
70k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Unsuck your backbone
ammeep
671
58k
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