media-query-facade
Do stuff via JavaScript when the media queries on a document change. For efficiency it uses window.matchMedia under the hood.
Usage
const mq = small: 'only screen and (max-width: 480px)' medium: 'only screen and (min-width: 480px) and (max-width: 720px)' const changeColour = { documentbodystylebackgroundColor = colour} mqmqmq
There is a working version of the above in the example
dir. First run npm start
, then point a browser at localhost:8080
.
API
const mq = new MQFacade(aliases)
Initialise a new MQFacade
. Media query aliases
may also be provided up front.
mq.registerAlias(alias, query)
Register an alias
for a query
, or register a number of aliases at once via an object.
mqmq
mq.on(query, callback, context)
Register a callback
which will be executed with the given context
on entry of the given query
or alias. If context
is not specified, it will default to the mq
instance.
mqmq
mq.off(query, callback, context)
Remove all callbacks for all queries:
mq
Remove all callbacks for a query
or alias:
mq
Remove a callback
for a query
or alias:
mq
Remove a callback
with a context
for a query
or alias:
mq
Install
$ npm install media-query-facade --save
There are also UMD builds available via unpkg:
- https://unpkg.com/media-query-facade/dist/media-query-facade.js
- https://unpkg.com/media-query-facade/dist/media-query-facade.min.js
License
MIT