Upload
margaret-day
View
212
Download
0
Embed Size (px)
Citation preview
COMP 135Web Site Design
Intermediate
Week 8
Responsive Web Design
Responsive Design
Adaptive Design
Pillars of Responsive DesignFluid grids
◦960.gs and other frameworks
Flexible images
Media Queries
Viewport Meta Property
<meta name="viewport" content="initial-scale=1.0, width=device-width">
Provides a more standard viewing experience to mobile devices
Use a Grid
html {background: url(grid.jpg) repeat-
y; }
Or a Framework
Frameworks can create complex layoutsUses non-semantic classes and IDs that
make sense in the context of the framework itself
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { display:inline; float: left; position: relative; margin-left: 10px; margin-right: 10px; }
Responsive Typography
target ÷ context = result
Target = element we’re working withContext = DOM location of targetResult = what we place in the stylesheetWhat is the relative font size we need if our
base design should be 12px and the default font size is 16px?
target / context = result12 / 16 = 0.75p { font-size: 0.75em; }
Fluid images
img {max-width: 100%;}
BreakpointsThe pixel at which a layout might need to
changeOnly two to four major ones neededMay require adding ones for specific
devices
0 600 > 1280400
Breakpoint graph with minor breakpoint
small.cssmedium.css
0 600px 960px400px
base.css
Media Query Device FeaturesFEATURE NAME DEFINITION HAS min- AND
max- PREFIXES
width Width of display area yes
height Height of display area Yes
device-width Width of device rendering surface Yes
device-width Height of device rendering surface Yes
orientation portrait or landscape values Yes
aspect-ratio Ratio of display area’s width over height
Yes
device-aspect-ratio
Ratio of device’s rendering surface width over height
Yes
resolution Tests density of pixels in device Yes
scan For TVs tests whether display is progressive or scan
No
grid Tests for grid-based display no
Media Queries
@media screen and (min-width: 1024px) {body { width 100%;
}}
screen is a traditional media type
min-width is a feature and the query is within the parentheses
Can chain multiple queries together with and keyword
@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px)