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
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
790
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
280
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
180
Cardápio - Caraguá A Gosto 2024 - De 01/08 a 08/09/2024
caraguatatuba
0
5.9k
root COMPANY DECK / We are hiring!
root_recruit
1
14k
🇫🇷 Design Leadership en eaux troubles
morganepeng
2
440
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
1
1.1k
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
490
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
250
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
280
Fleet Gas Station
joshtang
0
130
202409_会社概要資料_Englishver.pdf
zakkerooni
0
200
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
167
14k
Building Your Own Lightsaber
phodgson
102
6.1k
Docker and Python
trallard
40
3.1k
The Cult of Friendly URLs
andyhume
78
6k
Happy Clients
brianwarren
97
6.7k
Designing for humans not robots
tammielis
249
25k
Building an army of robots
kneath
302
42k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
A designer walks into a library…
pauljervisheath
202
24k
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