SLIDE 1
Class 7
@rwdkent
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, - - 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
SLIDE 2
SLIDE 3
Why does the concept of the canvas, used in print design, not translate well to the web?
SLIDE 4
What challenges do separate mobile/tablet experiences present
- vs. using responsive design?
SLIDE 5
Responsive Web Design
Percentage-Based Grids Flexible Images Media Queries
SLIDE 6
https://codepen.io/droll_ksu/pen/qvEbRZ
target / context = result
Percentage-Based Grids
SLIDE 7
Fluid Images
img { max-width: 100%; }
SLIDE 8
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 */
}
SLIDE 9
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 */ }
SLIDE 10
Breakpoint
Size at which the page layout or design “breaks” Can have multiple breakpoints per layout Let design (not device) dictate breakpoints
SLIDE 11
Company Name
Name, Telephone, Email
Contact Information
Our Products
Map
Locations
Search Company Name
Name, Telephone, Email Contact Information
Our Products
Map
Locations
Search
Breakpoint: 1000px wide
^
SLIDE 12
Media Query
width height device-width device-height
- rientation
aspect-ratio device-aspect ratio color color-index monochrome resolution scan
SLIDE 13
Magic Meta Tag
<meta name=“viewport” content=“initial-scale=1.0, width=device-width” />
SLIDE 14
Simple Responsive Example
https://codepen.io/droll_ksu/pen/BbyjZx
SLIDE 15
No Media Query
Infinity
SLIDE 16
@media screen and (max-width: 600px) { }
Infinity 600px
Meaning: If [device width] is less than or equal to 600px, then do {…}
SLIDE 17
@media screen and (min- width: 1200px) { }
Infinity 1200px
Meaning: If [device width] is greater than or equal to 600px, then do {…}
SLIDE 18
@media screen and (min-width: 800px) and (max-width: 1000px) { }
Infinity 1000px 800px
Meaning: If [device width] is between 800px and 600px, then do {…}
SLIDE 19
@media screen and (min-height: 500px) { }
Infinity 500px
SLIDE 20
@media screen and (max-height: 1100px) { }
Infinity 1100px
SLIDE 21
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*/ }
SLIDE 22
Media Query
@media screen and (min-width: 600px) { p { color: purple; } }
@media screen and (max-width: 1200px) { p { color: purple; } }
SLIDE 23