1. json2mq
Generate media query string from JSON or javascript object
json2mq
Package: json2mq
Created by: akiran
Last modified: Sun, 19 Jun 2022 06:32:36 GMT
Version: 0.2.0
License: MIT
Downloads: 8,853,838
Repository: https://github.com/akiran/json2mq

Install

npm install json2mq
yarn add 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

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code