media-query-fns
Cool functions for media queries. Spec-compliant.
Install
This package is available from the npm
registry.
npm install media-query-fns
Usage
Supports JavaScript + TypeScript:
import { compileQuery, matches, toEnglishString } from "media-query-fns";
const maxWidthQuery = compileQuery(`(max-width: 1200px)`);
const testEnv = (widthPx = 1280, heightPx = 800) => ({
widthPx,
heightPx,
deviceWidthPx: widthPx,
deviceHeightPx: heightPx,
dppx: 2,
});
console.log(matches(maxWidthQuery, testEnv(1280)));
console.log(matches(maxWidthQuery, testEnv(1000)));
const complexQuery = compileQuery(`screen and (monochrome) and (orientation)`);
console.log(matches(complexQuery, testEnv()));
console.log(toEnglishString(maxWidthQuery));
console.log(toEnglishString(complexQuery));
Can also be imported via require("media-query-fns")
.
Contributing
- PRs welcome and accepted, simply fork and create
- Issues also very welcome
- Treat others with common courtesy and respect 🤝
Dev environment (for contributing) requires:
- node >= 16.14.0
- npm >= 6.8.0
- git >= 2.11
Licence
MIT