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
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
kiyoshifuwa
0
130
発表資料テンプレート / My slide template
thatblue
0
230
ito aya Portfolio
itoaya116
0
100
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
220
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
960
Flow, Not Stock 知識触媒としてのIA
5kaichi
0
150
Tableau曲線表現講座(2024.11.21)
cielo1985
0
270
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
140
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
Les petites aventures de CSS, saison 2025
goetter
3
4k
Building foundations 堅牢なデザイントークンの設計
hilokifigma
0
1k
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
440
Featured
See All Featured
Site-Speed That Sticks
csswizardry
4
420
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Designing for humans not robots
tammielis
250
25k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
RailsConf 2023
tenderlove
29
1k
Documentation Writing (for coders)
carmenintech
69
4.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
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