175 lines
2.4 KiB
Markdown
175 lines
2.4 KiB
Markdown
# 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)
|