0.2.0 • Published 10 years ago

json2mq v0.2.0

Weekly downloads
1,200,750
License
MIT
Repository
github
Last release
10 years ago

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
ff-antd-vuedcxt-design-xue-xant-mstant-masterreact-slick-autoplayreact-slick-xllm-react-slickvue-slick-carousel-edit@onrewind/react-slickxhn-design-vuezyd-design-vueant-design-vue-xuexueant-design-vue-xxxue-dev-new-xant-design-vue-xxxxue-dev-new2growth-antd-webant-design-vue-lapvue-ant-patterns-cicdmio-design-vueshaper-reactant-design-vue-ysb@pkbr/react-slick@askme-inc/ant-design-vuetest-ant-design-vuerun-design-vue2@infinitebrahmanuniverse/nolb-json2cfbgc-componentstest-schh-ui@everything-registry/sub-chunk-1986ant-design-vue-zxkjhbgjtestui@yujindong/tools@yujindong/uitanshubitest-ant-vuetest-iki-mini-appwoowa-react-slickwith-breakpointsvue-mqvue-ant-patternsvue-antdx-intelligent-uix-antd-vuexizhi-react-slickxft-design-vueryotamurakami-react-slicksail-designsail-design-vuescorum-react-slickschema-page-loaderschh-uireserval-slickrealm-kitsuperset-plugin-chart-hello-world2seensun-web-componenttest-roopher-1test-roopher-2test-roopher-3test-we-designthe-platformthedots-slicktheflash-ant-design-vuevue-composable-helpersv-slick-carouselvenus-design-uivue-antd-uiued-component-vreact-slick-verticalminerva-uiminigui-vuelikai-design-vuehertz-vuejeet-test-antdiep-uilhd-ant-design-vuegrowth-xiwenhina-design-vuehsy-design-vueht-react-slickhwebidm-antv-uigov-design-vueh-ant-design-vuehomestory-react-slickhina-new-design-vuegm-react-slickgm-react-slidermx-ant-design-vuenbp-ant-designnea-react-slickmedia-queries-minpreact-sliderpsocratic-react-slickplugin-chart-ftthplugin-hellopjtools-map-vuepl-vue-antdpurposepetro-antd-vue
0.2.0

10 years ago

0.1.0

10 years ago