#less.style-library() v2.0.0Documentation
Breakpoints variables
Vieport breakpoint variables
Common device screen sizes are set up as variables to make it easier and faster to write media queries. The variables follow a specific pattern to make the variables easy to remember.
Breakpoint variables are constructed based on the following pattern:
1@media @[device]-[size]-[min/max]Device Options:
- mobile
- tablet
- laptop
- desktop
Size Options
- small
- large
Examples:
To target a screen width of 319px and below:
1@media @mobile-small-maxWhich will output the following CSS:
1@media only screen and (max-width: 319px)To target a viewport width of 1280px and above:
1@media @desktop-large-minWhich will output the following CSS:
1@media only screen and (min-width: 1280px)To target mobile devices with a screensize less than 320px wide you can write the following:
Complete list of defined media query variables:
| Max Width Variable | Screen Width PX | Min Width Variable | Screen Width PX |
|---|---|---|---|
| @mobile-small-max | 319px | @mobile-small-min | 320px |
| @mobile-large-max | 479px | @mobile-large-min | 480px |
| @tablet-small-max | 599px | @tablet-small-min | 600px |
| @tablet-large-max | 767px | @tablet-large-min | 768px |
| @laptop-small-max | 991px | @laptop-small-min | 992px |
| @laptop-large-max | 1279px | @laptop-large-min | 1280px |
| @desktop-small-max | 1599px | @desktop-small-min | 1600px |
| @desktop-large-max | 1919px | @desktop-large-min | 1920px |