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
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
240
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
540
Personal Story Sequence - Vendetta(WIP)
elrns88
0
420
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
810
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.7k
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
160
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
210
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
400
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
5k
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.6k
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
480
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
570
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
115
51k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Docker and Python
trallard
44
3.3k
How to Ace a Technical Interview
jacobian
276
23k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Code Reviewing Like a Champion
maltzj
521
39k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
Agile that works and the tools we love
rasmusluckow
328
21k
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