json2mq

json2mq

json2mq is used to generate media query string from JSON or javascript object.

Install

npm install json2mq

Usage

var json2mq = require('json2mq');
json2mq({minWidth: 100, maxWidth: 200});
// -> '(min-width: 100px) and (max-width: 200px)'

• Media type

json2mq({screen: true});  // -> 'screen'

• Media type with negation

json2mq({handheld: false});  // -> 'not handheld'

• Media features can be specified in camel case

json2mq({minWidth: 100, maxWidth: 200});
// -> '(min-width: 100px) and (max-width: 200px)'

• px is added to numeric dimension values

json2mq({minWidth: 100, maxWidth: '20em'});
// -> '(min-width: 100px) and (max-width: 20em)'

• Multiple media queries can be passed as an array

json2mq([{screen: true, minWidth: 100}, {handheld: true, orientation: 'landscape'}]); 
// -> 'screen and (min-width: 100px), handheld and (orientation: landscape)'

Contributors

• Eric Schoffstall

Similar packages

Other packages similar to json2mq

css-mediaquery

This package is used for parsing and serializing CSS media queries. It is similar to json2mq in that it deals with media queries but offers parsing capabilities in addition to serialization, which json2mq does not.

enquire.js

Although not a direct alternative to json2mq, enquire.js allows you to programmatically listen to media queries and act on them in JavaScript. It provides a higher-level API compared to json2mq, which is focused solely on converting JSON to media query strings.

matchmediaquery

This package is similar to json2mq in that it is used in the context of media queries. It is designed to evaluate whether a given media query matches the current state of the document. Unlike json2mq, it does not convert JSON to media queries but rather evaluates them.