{"id":13397868,"url":"https://github.com/ryanve/actual","last_synced_at":"2025-07-26T04:32:43.384Z","repository":{"id":13871465,"uuid":"16569423","full_name":"ryanve/actual","owner":"ryanve","description":"Determine actual CSS media query breakpoints via JavaScript","archived":false,"fork":false,"pushed_at":"2023-04-15T17:29:15.000Z","size":129,"stargazers_count":53,"open_issues_count":7,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-19T23:17:03.135Z","etag":null,"topics":["breakpoints","javascript","media-queries","media-query"],"latest_commit_sha":null,"homepage":"https://ryanve.github.io/actual/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"hfcorriez/fig-standards","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryanve.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":"ryanve","ko_fi":"ryanve"}},"created_at":"2014-02-06T05:25:06.000Z","updated_at":"2025-05-09T17:32:16.000Z","dependencies_parsed_at":"2022-07-13T08:40:46.841Z","dependency_job_id":"44bb1d93-3f98-4ea4-8ba2-821f61134dda","html_url":"https://github.com/ryanve/actual","commit_stats":{"total_commits":35,"total_committers":1,"mean_commits":35.0,"dds":0.0,"last_synced_commit":"a7dc9ac7c915095f2f2abe0eff80689dd2f103bb"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/ryanve/actual","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Factual","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Factual/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Factual/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Factual/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanve","download_url":"https://codeload.github.com/ryanve/actual/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Factual/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267117277,"owners_count":24038641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["breakpoints","javascript","media-queries","media-query"],"created_at":"2024-07-30T18:01:49.941Z","updated_at":"2025-07-26T04:32:43.344Z","avatar_url":"https://github.com/ryanve.png","language":"JavaScript","funding_links":["https://github.com/sponsors/ryanve","https://ko-fi.com/ryanve"],"categories":["JavaScript","Framework agnostic packages"],"sub_categories":["Responsive"],"readme":"# actual\n\n#### Determine actual `@media` breakpoints for [CSS \u003cb\u003erange\u003c/b\u003e features](http://dev.w3.org/csswg/mediaqueries4/#media-descriptor-table)\n\n- \u003cb\u003eactual\u003c/b\u003e calculates responsive breakpoints that \u003cem\u003eaccurately\u003c/em\u003e match CSS media queries\n- \u003cb\u003eactual\u003c/b\u003e is based on [this gist](https://gist.github.com/ryanve/7924792)\n\n## API\n\n### `actual(feature, unit=\"\", guess=1, step=*)`\n\n- \u003cvar\u003efeature\u003c/var\u003e: [CSS range feature name](http://dev.w3.org/csswg/mediaqueries4/#media-descriptor-table)\n- \u003cvar\u003eunit\u003c/var\u003e: applicable CSS unit (default: unitless)\n- \u003cvar\u003eguess\u003c/var\u003e: initial iteration (default: `1`)\n- \u003cvar\u003estep\u003c/var\u003e: step size (default: varies by unit)\n- \u003cb\u003e@return\u003c/b\u003e number (breakpoint or `0`)\n- Alias: `actual.actual`\n\n```js\nactual('width', 'em') // =\u003e 87.40625\nactual('device-width', 'px') // =\u003e 1440\nactual('resolution', 'dpi') // =\u003e 96\nactual('color') // =\u003e 10\n```\n\n### `actual.is(query)`\n- Test if a media query is active\n- \u003cb\u003e@return\u003c/b\u003e boolean\n- Alias: `actual.mq`\n\n```js\nactual.is('tv')\nactual.is('(width:30em)')\n```\n\n### `actual.as(unit)`\n- Create a partial function that gets a given feature in \u003cvar\u003eunit\u003c/var\u003e\n- \u003cb\u003e@return\u003c/b\u003e function\n\n```js\n['width', 'height', 'device-width', 'device-height'].map(actual.as('px'))\n```\n\n## Compatibility\n\n- 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`\n- Results depend on browser `@media` support for the feature in question\n\n## [npm](https://www.npmjs.com/package/actual)\n\n```\nnpm install actual --save\n```\n\n## Contribute\n\n```\nnpm install\nnpm test\nnpm start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanve%2Factual","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanve%2Factual","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanve%2Factual/lists"}