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
The Golden Whitney
ohtristanart
PRO
0
160
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.7k
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
120
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
640
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.6k
#yumemi_grow 読書シェア会 vol.1 - スコット・バークン著『デザインはどのように世界をつくるのか』
kaitou
1
170
線で考える画面構成
natsuume
1
870
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
650
UXデザインはなぜ定着しないのか?
designstudiopartners
0
630
本当に欲しかったのはモノレポツールではなく、tsconfigの設定だった / monorepo-tsconfig
rdlabo
1
140
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
660
LLMによるRAG評価用合成テストデータの生成
licux
6
1.1k
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
110
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Statistics for Hackers
jakevdp
799
220k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
180
53k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Docker and Python
trallard
44
3.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
A designer walks into a library…
pauljervisheath
205
24k
For a Future-Friendly Web
brad_frost
179
9.8k
Designing Experiences People Love
moore
142
24k
BBQ
matthewcrist
89
9.7k
The World Runs on Bad Software
bkeepers
PRO
68
11k
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