Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryanve/actual
Determine actual CSS media query breakpoints via JavaScript
https://github.com/ryanve/actual
breakpoints javascript media-queries media-query
Last synced: 3 months ago
JSON representation
Determine actual CSS media query breakpoints via JavaScript
- Host: GitHub
- URL: https://github.com/ryanve/actual
- Owner: ryanve
- License: mit
- Created: 2014-02-06T05:25:06.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2023-04-15T17:29:15.000Z (almost 2 years ago)
- Last Synced: 2024-10-14T04:23:18.591Z (3 months ago)
- Topics: breakpoints, javascript, media-queries, media-query
- Language: JavaScript
- Homepage: https://ryanve.github.io/actual/
- Size: 126 KB
- Stars: 54
- Watchers: 2
- Forks: 6
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# actual
#### Determine actual `@media` breakpoints for [CSS range features](http://dev.w3.org/csswg/mediaqueries4/#media-descriptor-table)
- actual calculates responsive breakpoints that accurately match CSS media queries
- actual is based on [this gist](https://gist.github.com/ryanve/7924792)
## API
### `actual(feature, unit="", guess=1, step=*)`
- feature: [CSS range feature name](http://dev.w3.org/csswg/mediaqueries4/#media-descriptor-table)
- 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`
```js
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`
```js
actual.is('tv')
actual.is('(width:30em)')
```
### `actual.as(unit)`
- Create a partial function that gets a given feature in unit
- @return function
```js
['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`](https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia#Browser_compatibility) or `msMatchMedia`
- Results depend on browser `@media` support for the feature in question
## [npm](https://www.npmjs.com/package/actual)
```
npm install actual --save
```
## Contribute
```
npm install
npm test
npm start
```