---
# System prepended metadata

title: Responsive Design

---

# Responsive Design 

![](https://i.imgur.com/SRh6yeJ.jpg)

---

## 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

![](https://i.imgur.com/REWoRP5.gif)


---


## 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
![](https://i.imgur.com/2bEdY1U.jpg)

---

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

![](https://i.imgur.com/xDJZ5vI.jpg)

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)

![](https://i.imgur.com/WNEgwd4.gif)




