|
|
|
@ -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,24 +55,29 @@ 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
|
|
|
|
|
|
|
|
- media types
|
|
|
|
- http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
|
|
|
|
|
|
|
|
- media types
|
|
|
|
- screen
|
|
|
|
- screen
|
|
|
|
- print
|
|
|
|
- print
|
|
|
|
- tv
|
|
|
|
- tv
|
|
|
|
- media features
|
|
|
|
- media features
|
|
|
|
- min-width
|
|
|
|
- min-width
|
|
|
|
- max-width
|
|
|
|
- max-width
|
|
|
|
- min-height
|
|
|
|
- min-height
|
|
|
|
- max-height
|
|
|
|
- max-height
|
|
|
|
- orientation
|
|
|
|
- orientation
|
|
|
|
- resolution
|
|
|
|
- resolution
|
|
|
|
1. mobile first with media queries
|
|
|
|
|
|
|
|
- mobile devices typically slower
|
|
|
|
### Use mobile-first ideology with media queries
|
|
|
|
- will read mobile css and discard larger device css
|
|
|
|
|
|
|
|
- larger devices will read mobile data and overwrite
|
|
|
|
Start with mobile device design and then add media queries for larger screens
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- mobile devices typically slower
|
|
|
|
|
|
|
|
- will read mobile css and discard larger device css
|
|
|
|
|
|
|
|
- larger devices will read mobile data and overwrite
|
|
|
|
- this is okay since they're faster
|
|
|
|
- this is okay since they're faster
|
|
|
|
- could also have media queries for small devices too
|
|
|
|
- could also have media queries for small devices too
|
|
|
|
- fine, but can get complex with lots of media queries
|
|
|
|
- fine, but can get complex with lots of media queries
|
|
|
|
- can scan and assume existing queries are only for large devices
|
|
|
|
- can scan and assume existing queries are only for large devices
|
|
|
|
|
