diff options
| author | littleblack111 <littleblack11111@gmail.com> | 2023-10-30 16:45:38 +0800 |
|---|---|---|
| committer | littleblack111 <littleblack11111@gmail.com> | 2023-10-30 16:45:38 +0800 |
| commit | a0579f91bbdf0de62b59df381d97a008bb98df57 (patch) | |
| tree | 69c21333750c7bc7358f9383560438048d9adebf /node_modules/css-mediaquery/README.md | |
| parent | 2d8aeba452672bcda2096e5d76bf37131c34075e (diff) | |
update/upgrade
Diffstat (limited to 'node_modules/css-mediaquery/README.md')
| -rw-r--r-- | node_modules/css-mediaquery/README.md | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/node_modules/css-mediaquery/README.md b/node_modules/css-mediaquery/README.md new file mode 100644 index 00000000..4c346229 --- /dev/null +++ b/node_modules/css-mediaquery/README.md @@ -0,0 +1,94 @@ +CSS Media Query +=============== + +[](https://travis-ci.org/ericf/css-mediaquery) +[](https://gemnasium.com/ericf/css-mediaquery) +[](https://npmjs.org/package/css-mediaquery) + +Parses and determines if a given CSS Media Query matches a set of values via +JavaScript. + +Installation +------------ + +Install via npm: + +```shell +$ npm install css-mediaquery +``` + +Usage +----- + +This package has two exports: `parse()`, and `match()` which can parse CSS Media +Queries and determine if a media query matches a given set of values. + +### Matching + +The `match()` method lets you compare a media query expression with a JavaScript +object and determine if a media query matches a given set of values. + +```javascript +var mediaQuery = require('css-mediaquery'); + +var isMatch = mediaQuery.match('screen and (min-width: 40em)', { + type : 'screen', + width: '1024px' +}); + +console.log(isMatch); // => true +``` + +The values specified to check a media query string against should be thought of +as if they are the current state of a device/browser. A `type` value _must_ be +specified, and it can _not_ be `"all"`. + +### Parsing + +Existing CSS Parsers don't do a great job at parsing the details of media +queries. That's where `css-mediaquery` shines. You can parse a media query +expression and get an AST back by using the `parse()` method. + +```javascript +var mediaQuery = require('css-mediaquery'), + ast = mediaQuery.parse('screen and (min-width: 48em)'); +``` + +The `ast` variable will have the following payload: + +```javascript +[ + { + inverse: false, + type : 'screen', + + expressions: [ + { + modifier: 'min', + feature : 'width', + value : '48em' + } + ] + } +] +``` + +This package was written with care to following the W3C Recommendations for +[CSS3 Media Queries][w3c-mq] and [CSS3 Values and Units][w3c-vu]. It supports +all of the [Media Features][w3c-mq-features] and will properly convert values to +a common unit before comparing them. + + +[w3c-mq]: http://www.w3.org/TR/css3-mediaqueries/ +[w3c-mq-features]: http://www.w3.org/TR/css3-mediaqueries/#media1 +[w3c-vu]: http://www.w3.org/TR/css3-values/ + + +License +------- + +This software is free to use under the Yahoo! Inc. BSD license. +See the [LICENSE file][] for license text and copyright information. + + +[LICENSE file]: https://github.com/ericf/css-mediaquery/blob/master/LICENSE |
