$ npm install ergonomic-breakpoint
Ergonomic CSS media queries. Uses
CSS custom media queries.
$ npm install ergonomic-breakpoint
With cssnext or sheetify installed:
@media (--wrist) {
/* styles for wrist viewport */
}
@media (--lap) and (--desk) {
/* styles for lap and desk viewports */
}
@media (--not-wrist) and (--not-palm) {
/* styles for lap and larger viewports */
}
Wrist viewport. <320px.
Palm viewport. >=320px && <800px.
Lap viewport. >=800px && <1920px.
Desk viewport. >=1920px && <2560px.
Wall viewport. >=2560px.
Wrist viewport. >=320px.
Palm viewport. <320px && >=800px.
Lap viewport. <800px && >=1920px.
Desk viewport. <1920px && >=2560px.
Wall viewport. <2560px.
