actual

    0.4.0 • Public • Published

    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?, 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)
    • 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
    • @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
    

    Fund

    Tip the developer =)

    Install

    npm i actual

    DownloadsWeekly Downloads

    984

    Version

    0.4.0

    License

    MIT

    Last publish

    Collaborators

    • ryanve