https://github.com/niksy/media-query-gap

Apply gap on max-width/height media queries.
https://github.com/niksy/media-query-gap

Last synced: 16 days ago
JSON representation

Apply gap on max-width/height media queries.

• Host: GitHub
• URL: https://github.com/niksy/media-query-gap
• Owner: niksy
• License: mit
• Created: 2016-11-20T16:06:58.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2020-10-21T08:05:52.000Z (about 4 years ago)
• Last Synced: 2024-12-24T01:41:44.200Z (21 days ago)
• Language: JavaScript
• Size: 6.84 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# media-query-gap

[![Build Status][ci-img]][ci]

Apply gap on max-width/height media queries.

Useful when you want to

[prevent double breakpoints](http://tzi.fr/css/prevent-double-breakpoint).

This is a low-level module. You’re probably looking for

[PostCSS][postcss-plugin] or [Babel][babel-plugin] plugin.

## Install

```sh

npm install media-query-gap --save

```

## Usage

```js

import mediaQueryGap from 'media-query-gap';

console.log(emMediaQuery('screen and (max-width:600px)'));

// 'screen and (max-width:599px)'

console.log(emMediaQuery('screen and (max-width:37.5em)'));

// 'screen and (max-width:37.49em)'

```

## API

### mediaQueryGap(str)

Returns: `string`

#### str

Type: `string`

Media query to convert.

## License

MIT © [Ivan Nikolić](http://ivannikolic.com)

[ci]: https://travis-ci.com/niksy/media-query-gap

[ci-img]: https://travis-ci.com/niksy/media-query-gap.svg?branch=master

[postcss-plugin]: https://github.com/niksy/postcss-media-query-gap

[babel-plugin]: https://github.com/niksy/babel-plugin-media-query-gap