Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/diegomura/media-engine
Media queries engine written in pure JS!
https://github.com/diegomura/media-engine
engine media media-queries media-query
Last synced: 3 months ago
JSON representation
Media queries engine written in pure JS!
- Host: GitHub
- URL: https://github.com/diegomura/media-engine
- Owner: diegomura
- Created: 2018-02-27T05:32:54.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-11-09T03:50:18.000Z (about 3 years ago)
- Last Synced: 2024-03-04T03:32:25.200Z (11 months ago)
- Topics: engine, media, media-queries, media-query
- Language: JavaScript
- Homepage:
- Size: 46.9 KB
- Stars: 11
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# media-engine
> Media queries engine written in pure JS!
[](https://npm.im/media-engine)
[](https://travis-ci.org/diegomura/media-engine)
[](./LICENSE)
## Install
```sh
npm install media-engine --save
# or
yarn add media-engine
```
## API
`min-height`
```js
matchMedia(
{
'@media min-height: 700': {
color: 'green',
},
},
{ height: 800 }
);
// { color: 'green' }
matchMedia(
{
'@media min-height: 700': {
color: 'green',
},
},
{ height: 100 }
);
// { }
```
`max-height`
```js
matchMedia(
{
'@media max-height: 700': {
color: 'green',
},
},
{ height: 100 }
);
// { color: 'green' }
matchMedia(
{
'@media max-height: 700': {
color: 'green',
},
},
{ height: 800 }
);
// { }
```
`min-width`
```js
matchMedia(
{
'@media min-width: 700': {
color: 'green',
},
},
{ width: 800 }
);
// { color: 'green' }
matchMedia(
{
'@media min-width: 700': {
color: 'green',
},
},
{ width: 100 }
);
// { }
```
`max-width`
```js
matchMedia(
{
'@media max-width: 700': {
color: 'green',
},
},
{ width: 100 }
);
// { color: 'green' }
matchMedia(
{
'@media max-width: 700': {
color: 'green',
},
},
{ width: 800 }
);
// { }
```
`orientation`
```js
matchMedia(
{
'@media orientation: landscape': {
color: 'green',
},
},
{ orientation: 'landscape' }
);
// { color: 'green' }
matchMedia(
{
'@media orientation: landscape': {
color: 'green',
},
},
{ orientation: 'portrait' }
);
// { }
```
`and operator`
```js
matchMedia(
{
'@media (min-width: 700) and (orientation: landscape)': {
color: 'green',
},
},
{ width: 800, orientation: 'landscape' }
);
// { color: 'green' }
```
`or operator`
```js
matchMedia(
{
'@media (min-width: 700), (orientation: landscape)': {
color: 'green',
},
},
{ orientation: 'landscape' }
);
// { color: 'green' }
```
`multiple queries`
```js
matchMedia(
{
'@media orientation: landscape': {
color: 'green',
},
'@media min-width: 700': {
background: 'red',
}
},
{ orientation: 'landscape', width: 800 }
);
// { color: 'green', background: 'red' }
```
## License
MIT © [Diego Muracciole](http://github.com/diegomura)