Awesome

media-engine

Media queries engine written in pure JS!

Install

npm install media-engine --save
# or
yarn add media-engine

API

min-height

matchMedia(
  {
    '@media min-height: 700': {
      color: 'green',
    },
  },
  { height: 800 }
);
// { color: 'green' }

matchMedia(
  {
    '@media min-height: 700': {
      color: 'green',
    },
  },
  { height: 100 }
);
// { }

max-height

matchMedia(
  {
    '@media max-height: 700': {
      color: 'green',
    },
  },
  { height: 100 }
);
// { color: 'green' }

matchMedia(
  {
    '@media max-height: 700': {
      color: 'green',
    },
  },
  { height: 800 }
);
// { }

min-width

matchMedia(
  {
    '@media min-width: 700': {
      color: 'green',
    },
  },
  { width: 800 }
);
// { color: 'green' }

matchMedia(
  {
    '@media min-width: 700': {
      color: 'green',
    },
  },
  { width: 100 }
);
// { }

max-width

matchMedia(
  {
    '@media max-width: 700': {
      color: 'green',
    },
  },
  { width: 100 }
);
// { color: 'green' }

matchMedia(
  {
    '@media max-width: 700': {
      color: 'green',
    },
  },
  { width: 800 }
);
// { }

orientation

matchMedia(
  {
    '@media orientation: landscape': {
      color: 'green',
    },
  },
  { orientation: 'landscape' }
);
// { color: 'green' }

matchMedia(
  {
    '@media orientation: landscape': {
      color: 'green',
    },
  },
  { orientation: 'portrait' }
);
// { }

and operator

matchMedia(
  {
    '@media (min-width: 700) and (orientation: landscape)': {
      color: 'green',
    },
  },
  { width: 800, orientation: 'landscape' }
);
// { color: 'green' }

or operator

matchMedia(
  {
    '@media (min-width: 700), (orientation: landscape)': {
      color: 'green',
    },
  },
  { orientation: 'landscape' }
);
// { color: 'green' }

multiple queries

matchMedia(
  {
    '@media orientation: landscape': {
      color: 'green',
    },
    '@media min-width: 700': {
      background: 'red',
    }
  },
  { orientation: 'landscape', width: 800 }
);
// { color: 'green', background: 'red' }

License

MIT © Diego Muracciole