# Responsive Design


---

## Units
Absolute units - always the same eg. px
Relative units - dependent on individual computer settings eg. rem, em, vh, vw
It's best to use relative units for automatic scaling


---

## Media Queries
Media queries are not necessary when using flexbox/ grid as these are responsive by default
MQ break points:
* phone
* tablet
* small desktop
* large desktop

---

## Other uses for Media Queries
* pointers
* hovers
* orientation


https://css-tricks.com/touch-devices-not-judged-size/

---

## Mobile First CSS

Since 2016 mobile usage has surpassed desktop usage in online media consumption.

**Don't target specific devices!**
Design with smallest device in mind and then scale upwards to desktop computers - this ensures that you start with key information and can additional features when/ if necessary.

Desktop first good for feature rich sites (productivity, office etc)

---
## Responsive vs. Adaptive

Responsive design - the website will adapt to the width of users’ screens, allowing for maximum versatility. (top)

Adaptive - it will adapt to specific screen widths i.e. breakpoints. (bottom)