9
Responsive Design

Responsive Design - ATLAS Institutecreative.colorado.edu › atlas2200 › pdf › week9-tech-responsive.pdfResponsive Design. Responsive checklist viewport fluid layout breakpoints

  • Upload
    others

  • View
    11

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Responsive Design - ATLAS Institutecreative.colorado.edu › atlas2200 › pdf › week9-tech-responsive.pdfResponsive Design. Responsive checklist viewport fluid layout breakpoints

Responsive Design

Page 2: Responsive Design - ATLAS Institutecreative.colorado.edu › atlas2200 › pdf › week9-tech-responsive.pdfResponsive Design. Responsive checklist viewport fluid layout breakpoints

Responsive checklist

viewport

fluid layout

breakpoints

@media queries

Page 3: Responsive Design - ATLAS Institutecreative.colorado.edu › atlas2200 › pdf › week9-tech-responsive.pdfResponsive Design. Responsive checklist viewport fluid layout breakpoints

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…

Page 4: Responsive Design - ATLAS Institutecreative.colorado.edu › atlas2200 › pdf › week9-tech-responsive.pdfResponsive Design. Responsive checklist viewport fluid layout breakpoints

Fluid Layout

set container to max width

change width of all elements (boxes) from px to %

Page 5: Responsive Design - ATLAS Institutecreative.colorado.edu › atlas2200 › pdf › week9-tech-responsive.pdfResponsive Design. Responsive checklist viewport fluid layout breakpoints

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)

Page 6: Responsive Design - ATLAS Institutecreative.colorado.edu › atlas2200 › pdf › week9-tech-responsive.pdfResponsive Design. Responsive checklist viewport fluid layout breakpoints

@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…

Page 7: Responsive Design - ATLAS Institutecreative.colorado.edu › atlas2200 › pdf › week9-tech-responsive.pdfResponsive Design. Responsive checklist viewport fluid layout breakpoints

@media blocks

place at very bottom of css

order is largest size to smallest

Page 8: Responsive Design - ATLAS Institutecreative.colorado.edu › atlas2200 › pdf › week9-tech-responsive.pdfResponsive Design. Responsive checklist viewport fluid layout breakpoints

test locally with inspect element device toolbar

Page 9: Responsive Design - ATLAS Institutecreative.colorado.edu › atlas2200 › pdf › week9-tech-responsive.pdfResponsive Design. Responsive checklist viewport fluid layout breakpoints

“Be responsiveable -upload to server and test live on every mobile / tablet device you can get your hands on”

–David