---
title: Media query basic breakpoint
tags: CSS
---
# Media query basic breakpoint

## Media query manager

:::info
Those breakpoints are what I prefer to using.
:::

### Standard

- breakpoints

- 0 - 600px : phone
- 600 - 900px : Tablet portrait
- 900 - 1200px : Tablet landscape
- 1200 - 1800 : is where our normal styles apply
- 1800px+ : Big desktop

- $breakpoint argument choices:
- phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typography > general layout + grid > page layout > components

1rem = 16px
==rem is best option for media query==

### Example
> Breakpoint variable (<project-root>/sass/abstracts/_mixins.scss)

// MEDIA QUERY MANAGER

/*
0 - 600px: phone
600 - 900px: Tablet portrait
900 - 1200px: Tablet landscape
[1200 - 1800]: is where our normal styles apply
1800px + : Big desktop
*/

/*
$breakpoint argument choices:
- phone
- tab-port
- tab-land
- big-desktop
ORDER: Base + typography > general layout + grid > page layout > components
1em = 16px
[em] is best option for media query
*/

@mixin respond($breakpoint) {
@if $breakpoint == phone {
@media (max-width: 37.5em) {
//600px
@content;
}
}
@if $breakpoint == tab-port {
@media (max-width: 56.25em) {
//900px
@content;
}
}
@if ($breakpoint == tab-land) {
@media (max-width: 75em) {
//1200px
@content;
}
}
@if ($breakpoint == big-desktop) {
@media (min-width: 112.5em) {
//1800px
@content;
}
}
}

> Include breakpoint (?.scss) ex:

@include respond(tab-port) {
padding: 20rem 0rem;
}

### Reference

- Implement project: https://github.com/barrystone/natours/blob/master/sass/abstracts/_mixins.scss
- Teacher: [Jonas Schmedtmann](https://github.com/jonasschmedtmann)