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
480
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
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.5k
Them Middle School Kids Pitch
stevie_vee
0
130
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
650
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
1.9k
minpaku-community-scrum-patterns
norinity1103
1
250
decksh object reference
ajstarks
2
1.3k
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
120
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
110
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
170
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
560
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
450
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
510
Building Applications with DynamoDB
mza
96
6.6k
Making Projects Easy
brettharned
117
6.4k
Balancing Empowerment & Direction
lara
3
610
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Bash Introduction
62gerente
614
210k
BBQ
matthewcrist
89
9.8k
RailsConf 2023
tenderlove
30
1.2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
How GitHub (no longer) Works
holman
315
140k
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