Post on 27-Jan-2015
description
DesignResponsive
Matthew Campbell@BeardedCoder
What Is It?
Approaches
Graceful Degradation
Progressive Enhancement
Mobile First
Tip #1
let the device width rule
<head>…<meta
name="viewport" content="width=device-width" /></head>
HTML
Tip #2
use relative fonts (em, %)
Tip #3
use relative widths (%)
Tip #4
favour max- and min-width
Tip #5
make your images flexible
HTML
<imgsrc="panda.png"alt="A panda eating
bamboo" />CSS
img {width: 100%;height: auto;
}
Media Queries
Tip #6
use media queries to adapt your layout to devices
@media screen and ( min-width: 780px ) {
.sidebar {display: block;
}
.main {max-width: 800px;margin-left: 240px;padding-left: 50px;border-left: 1px solid #999;
}}
CSS
@media screen and ( min-width: 780px )and ( max-width: 1080px ) {
}
CSS
@media all and ( max-width: 699px )and ( min-width: 520px ),( min-width: 1151px ) {{
}
CSS
BeardedCoder
@BeardedCoder
http://matthew-campbell.ca
Contact
Me:
Twitter:
Website:
GitHub: