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

actual(feature, unit="", guess=1, step=*)

• feature: CSS range feature name
• unit: applicable CSS unit (default: unitless)
• guess: initial iteration (default: 1)
• step: step size (default: varies by unit)
• @return number (breakpoint or 0)
• Alias: actual.actual

actual('width','em')// => 87.40625actual('device-width','px')// => 1440actual('resolution','dpi')// => 96actual('color')// => 10

actual.is(query)

• Test if a media query is active
• @return boolean
• Alias: actual.mq

actual.is('tv')actual.is('(width:30em)')

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 --save

Contribute

npm install
npm test
npm start