|
|
|
@ -41,7 +41,6 @@ Layout using percentages so that content shrinks and expands with window dimensi
|
|
|
|
## Describe the "mobile first" development process
|
|
|
|
## Describe the "mobile first" development process
|
|
|
|
|
|
|
|
|
|
|
|
1. Term is mostly used for designers
|
|
|
|
1. Term is mostly used for designers
|
|
|
|
- use https://generalassemb.ly/
|
|
|
|
|
|
|
|
1. Also applies to developers
|
|
|
|
1. Also applies to developers
|
|
|
|
- start by developing mobile and move upward
|
|
|
|
- start by developing mobile and move upward
|
|
|
|
- don't go desktop to mobile
|
|
|
|
- don't go desktop to mobile
|
|
|
|
@ -56,7 +55,8 @@ Layout using percentages so that content shrinks and expands with window dimensi
|
|
|
|
|
|
|
|
|
|
|
|
## Define media queries and why we need them
|
|
|
|
## Define media queries and why we need them
|
|
|
|
|
|
|
|
|
|
|
|
1. media query possibilites
|
|
|
|
### media query possibilites
|
|
|
|
|
|
|
|
|
|
|
|
- http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
|
|
|
|
- http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
|
|
|
|
- media types
|
|
|
|
- media types
|
|
|
|
- screen
|
|
|
|
- screen
|
|
|
|
@ -69,7 +69,11 @@ Layout using percentages so that content shrinks and expands with window dimensi
|
|
|
|
- max-height
|
|
|
|
- max-height
|
|
|
|
- orientation
|
|
|
|
- orientation
|
|
|
|
- resolution
|
|
|
|
- resolution
|
|
|
|
1. mobile first with media queries
|
|
|
|
|
|
|
|
|
|
|
|
### Use mobile-first ideology with media queries
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Start with mobile device design and then add media queries for larger screens
|
|
|
|
|
|
|
|
|
|
|
|
- mobile devices typically slower
|
|
|
|
- mobile devices typically slower
|
|
|
|
- will read mobile css and discard larger device css
|
|
|
|
- will read mobile css and discard larger device css
|
|
|
|
- larger devices will read mobile data and overwrite
|
|
|
|
- larger devices will read mobile data and overwrite
|
|
|
|
|
