ergonomic-breakpoint

Ergonomic CSS media queries. Uses CSS custom media queries.

Installation

$ npm install ergonomic-breakpoint

Usage

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 */
}

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

License

MIT