Determine actual @media breakpoints for CSS range features
- actual calculates responsive breakpoints that accurately match CSS media queries
- actual is based on this gist
- 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.40625
actual('device-width', 'px') // => 1440
actual('resolution', 'dpi') // => 96
actual('color') // => 10- Test if a media query is active
- @return boolean
- Alias:
actual.mq
actual.is('tv')
actual.is('(width:30em)')- Create a partial function that gets a given feature in unit
- @return function
['width', 'height', 'device-width', 'device-height'].map(actual.as('px'))- Chrome 9+, FF6+, IE9+, Opera 12.1, Safari 5.1 or elsewhere via
matchMediaormsMatchMedia - Results depend on browser
@mediasupport for the feature in question
npm install actual --save
npm install
npm test
npm start