Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Determine actual CSS media query breakpoints via JavaScript
JavaScript
branch: master

README.md

actual

Determine actual @media breakpoints for CSS range features

  • actual calculates responsive breakpoints that accurately match CSS media queries
  • actual is based on this gist

API (0.2)

actual(feature, unit?, init?, step?)

  • feature: CSS range feature name
  • unit: applicable CSS unit (default: unitless)
  • init: initial guess (default: 1)
  • step: step size (default: varies by unit)
  • @return number (breakpoint)
actual('width', 'em') // => 87.40625
actual('device-width', 'px') // => 1440
actual('resolution', 'dpi') // => 96
actual('color') // => 10

actual.mq(query)

  • Test if a media query is active
  • @return boolean
actual.mq('tv')
actual.mq('(width:30em)')

actual.feature(feature)

  • Create a partial function that gets feature in a given unit
  • @return function
['px', 'em', 'pt', 'in', 'cm', 'mm'].map(actual.feature('width'))

actual.as(unit)

  • Create a partial function that gets a given feature in unit
  • @return function
['width', 'height', 'device-width', 'device-height'].map(actual.as('px'))

Compatibility

  • Chrome 9+, FF6+, IE9+, Opera 12.1, Safari 5.1 or elsewhere via matchMedia or msMatchMedia
  • Results depend on browser @media support for the feature in question

NPM

$ npm install actual

Contribute

Contribute by making edits in /src or reporting issues.

$ npm install
$ grunt jshint:src

Fund

Tip the developer =)

License

MIT

Something went wrong with that request. Please try again.