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
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
260
Картирование процесса фасилитация стратсессий с Картой гипотез при помощи Карты процесса-опыта
ashapiro
0
400
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
14
6.2k
我做了一個詐騙網站...嗎?
crboy
1
150
Карта реализации историй — убийца USM
ashapiro
0
210
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
360
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
480
Credence
lratmansunu
0
460
root COMPANY DECK / We are hiring!
root_recruit
1
15k
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
290
Improve a service workshop
mastervicedesign
1
110
Design System for training program
mct
0
280
Featured
See All Featured
Done Done
chrislema
181
16k
Why Our Code Smells
bkeepers
PRO
334
57k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
Making the Leap to Tech Lead
cromwellryan
133
8.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Designing the Hi-DPI Web
ddemaree
280
34k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Embracing the Ebb and Flow
colly
84
4.5k
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