Awesome

actual

Determine actual @media breakpoints for CSS <b>range</b> features

• <b>actual</b> calculates responsive breakpoints that <em>accurately</em> match CSS media queries
• <b>actual</b> is based on this gist

API

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

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

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

actual.is(query)

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

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

actual.as(unit)

• Create a partial function that gets a given feature in <var>unit</var>
• <b>@return</b> 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