View
11
Download
0
Category
Preview:
Citation preview
Responsive Design
Responsive checklist
viewport
fluid layout
breakpoints
@media queries
Viewport
placed inside head tags
turns off viewport “scaling/zoom” in browser and sets to actual size
required or your responsive site is not actually responsive…
Fluid Layout
set container to max width
change width of all elements (boxes) from px to %
Breakpoints
activate “inspect element” and detach into separate window
resize web page (drag size of browser window right to left) - dimensions are displayed on top-right of browser
when an element “breaks” -note the width and what broke (that’s your breakpoint)
@media queriesfix breakpoint issues with css based on the width of the browser
default sizes for breakpoints small or “mobile” = 0 - 480pxmedium or “tablet” = 481px to 768pxlarge or “desktop” = 769px +
your actual breakpoints may differ as your layout is going to break where it wants to break…
@media blocks
place at very bottom of css
order is largest size to smallest
test locally with inspect element device toolbar
“Be responsiveable -upload to server and test live on every mobile / tablet device you can get your hands on”
–David
Recommended