responsive web design
Post on 21-Apr-2017
9.324 Views
Preview:
TRANSCRIPT
HISTORY
Cameron AdamsSeptember, 2004Resolution Dependent LayoutEthan MarcotteMay, 2010Responsive Web Design
1920 x 1080 pixels960 x 540 pixels 2=
1920 x 1080 pixels1920 x 1080 pixels 1=
1920 x 1080 pixels640 x 360 pixels 3=
PIXELS ARE NOT PIXELS
VIEWPORT
"name=viewport" to control the width and scaling of the browsers viewport. "width=device-width" to match the screen's width in device independent
pixels. "initial-scale=1" to establish a 1:1 relationship between CSS pixels and
device independent pixels.
<head><meta name="viewport" content="width=device-width, initial-scale=1">
</head>
FLUID GRIDS
YESNOdiv.fullWidth {width: 640px;margin-left: auto;margin-right: auto;
}
div.fullWidth {width: 100%;
}
Fixed width is dead.Long live 100%
MEDIA QUERIES@media (query) {/* CSS Rules used when query matches */
}
@media (min-width: 700px) {...
}
@media (min-width: 700px) and (orientation: landscape) {...
}
@media handheld and (min-width: 700px) and (orientation: landscape) {...
}
TOOLS
Grid & Frameworks (Bootstrap, Less, Skeleton etc.)
Sketch Sheets & Wireframes (StyleTil.es etc.)
JavaScript & jQuery (Adapt.js, Respond.js etc.)
Other (FitText.js, Retina Images, Grunt etc.)
TEST
URL & iFrame (screenfly, screenqueri.es etc.)
Browser Tools (Chrome, Firefox etc.)
Emulators (Android, iOS, WP etc.)
Applications & Extensions (Adobe Edge Inspect etc.)
top related