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
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
310
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
340
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
730
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.6k
クライアントワークにおける UXリサーチの実践
kozotaira
0
380
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.7k
横断組織デザイナーの働き方
mixi_design
PRO
0
360
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
5k
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
290
マンガで分かるサービスデザインガイドライン
senryakuka
1
670
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
aya_murakami_portfolio
ayakaimi1101
0
1.3k
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
KATA
mclloyd
29
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Embracing the Ebb and Flow
colly
84
4.6k
Optimizing for Happiness
mojombo
377
70k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Building Adaptive Systems
keathley
40
2.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Rails Girls Zürich Keynote
gr2m
94
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
660
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
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