ergonomic-breakpoint
Ergonomic CSS media queries. Uses
CSS custom media queries
.
Installation
$ npm install ergonomic-breakpoint
Usage
With cssnext or sheetify installed:
{ /* styles for wrist viewport */} { /* styles for lap and desk viewports */} { /* styles for lap and larger viewports */}
API
@media (--wrist)
Wrist viewport. <320px
.
@media (--palm)
Palm viewport. >=320px && <800px
.
@media (--lap)
Lap viewport. >=800px && <1920px
.
@media (--desk)
Desk viewport. >=1920px && <2560px
.
@media (--wall)
Wall viewport. >=2560px
.
@media (--not-wrist)
Wrist viewport. >=320px
.
@media (--not-palm)
Palm viewport. <320px && >=800px
.
@media (--not-lap)
Lap viewport. <800px && >=1920px
.
@media (--not-desk)
Desk viewport. <1920px && >=2560px
.
@media (--not-wall)
Wall viewport. <2560px
.
See Also
- custom media query specificiation
- active development on Categorizr has come to an end
- unified device static
- screensiz.es
- ergonomic viewport - Get the current ergonomic viewport
- logic in media queries