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
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
190
最速[要出典]アクセシビリティチェック
magi1125
2
200
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
780
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.2k
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
590
Personal Story Sequence - Vendetta(WIP)
elrns88
0
400
横断組織デザイナーの働き方
mixi_design
PRO
0
330
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
510
セブンデックス カルチャーブック
sevendex
0
1.7k
Museum Heist
allykae
0
120
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
820
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
230
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
How to train your dragon (web standard)
notwaldorf
90
5.8k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Typedesign – Prime Four
hannesfritz
40
2.5k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
4 Signs Your Business is Dying
shpigford
182
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