Last active
July 3, 2017 11:02
-
-
Save PCianes/c1259d233659fad471aa515340b55833 to your computer and use it in GitHub Desktop.
Neat Breakpoints
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Native CSS breakpoint | |
| @media screen and (max-width: 1023px) { | |
| // styles | |
| } | |
| // Device size breakpoint | |
| @media screen and (max-width: $screen-size--medium) { | |
| // styles | |
| } | |
| // Device size with Neat function `media` | |
| @include media($breakpoint__screen-size--medium) { | |
| // styles | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| // Standard Media Query Breakpoints | |
| //======================= | |
| $large-desktop: rem(1680); | |
| $desktop: rem(1366); | |
| $tablet-landscape: rem(1024); | |
| $wp-admin-bar: rem(783); | |
| $tablet-portrait: rem(768); | |
| $phone-landscape: rem(640); | |
| $phone-portrait: rem(360); |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
There are various strategies available for handling the media query breakpoints including these 3 options, which all do the same thing.
The advantage to setting a new breakpoint in the _breakpoints.scss file is you make all changes to your breakpoints in one place.