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
450
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
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
620
ポートフォリオ思考を通じたデザイナーキャリアの形成と未来への展望
recruitengineers
PRO
3
2.3k
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
320
Apple提供アプリのナビゲーションバーアイテムクイズ / 20231110-hig
uhooi
2
170
231206_Book-launch-event_kato
hjmkth
2
1.2k
Sociotechnical design for software and human systems
xinyao
2
490
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
Speaker DeckにおけるGoogleスライドのフォントの問題解決/problem solving for google slides 2023
moriyuya
31
2.6k
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
1
860
他人事じゃないWebアクセシビリティ入門
arihiro17
0
210
モデル・デザイン入門
akitsugu7935
0
460
デザインシステムで解消するさまざまな分断
hirataaa0220
1
170
Featured
See All Featured
It's Worth the Effort
3n
180
27k
Debugging Ruby Performance
tmm1
70
11k
A Philosophy of Restraint
colly
197
16k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
How to Ace a Technical Interview
jacobian
272
22k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Building a Scalable Design System with Sketch
lauravandoore
456
32k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Bash Introduction
62gerente
604
210k
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