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
「UXとUIの違い」v2
shirasu3
0
250
What makes a great Director?
_limex_
0
330
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
400
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
220
アクセシビリティに取り組むメリット
magi1125
2
270
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
1k
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
150
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
mkasumi
0
450
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
640
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
bengo4com
1
1.3k
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
440
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Agile that works and the tools we love
rasmusluckow
331
21k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Building Adaptive Systems
keathley
44
2.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
920
Designing for Performance
lara
610
69k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
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