Class 7 @rwdkent RWD Book Why does the concept of the canvas, - PowerPoint PPT Presentation

Class 7 @rwdkent

RWD Book

Why does the concept of the canvas, used in print design, not translate well to the web?

What challenges do separate mobile/tablet experiences present vs. using responsive design?

Responsive Web Design Percentage-Based Grids Flexible Images Media Queries

Percentage-Based Grids target / context = result https://codepen.io/droll_ksu/pen/qvEbRZ

Fluid Images img { max-width: 100%; }

Media Query @media screen and (min-width: 600px) { /* CSS Styles That Apply Go Here */ } @media screen and (max-width: 1200px) { /* CSS Styles That Apply Go Here */ }

Media Query @media screen and (min-width: 600px) and (max-width: 1200px) { /* CSS Styles That Apply Go Here */ } @media screen and (min-height: 600px) { /* CSS Styles That Apply Go Here */ }

Breakpoint Size at which the page layout or design “breaks” Can have multiple breakpoints per layout Let design (not device) dictate breakpoints

Company Name Company Name Search Search Our Products Our Products Locations Locations Map Map Name, Telephone, Email Name, Telephone, Email Contact Information Contact Information ^ Breakpoint: 1000px wide

Media Query width device-aspect ratio height color device-width color-index device-height monochrome orientation resolution aspect-ratio scan

Magic Meta Tag <meta name=“viewport” content=“initial-scale=1.0, width=device-width” />

Simple Responsive Example https://codepen.io/droll_ksu/pen/BbyjZx

No Media Query 0 Infinity

@media screen and (max-width: 600px) { } Meaning: If [device width] is less than or equal to 600px, then do {…} 0 600px Infinity

@media screen and (min- width: 1200px) { } Meaning: If [device width] is greater than or equal to 600px, then do {…} 0 1200px Infinity

@media screen and (min-width: 800px) and (max-width: 1000px) { } Meaning: If [device width] is between 800px and 600px, then do {…} 0 800px 1000px Infinity

Infinity @media screen and (min-height: 500px) { } 500px 0

Infinity @media screen and 1100px (max-height: 1100px) { } 0

Media Query @media screen and (min-width: 600px) { /* CSS Styles Inside Here Only Apply at 600px and higher*/ } @media screen and (max-width: 1200px) { /* CSS Styles Inside Here Only Apply at 1200px and lower*/ }

Media Query @media screen and (min-width: 600px) { p { color: purple; } } @media screen and (max-width: 1200px) { p { color: purple; } }

Media Query Examples https://codepen.io/droll_ksu/pen/ wOBMOR