Web component for media queries (like iron-media-query) implemented with LitElement.
npm install lit-media-queryshell
npm install lit-media-query --save
`
Then, import lit-media-query into your element:
`javascript
import 'lit-media-query/lit-media-query.js';
`
or in an html file:
`html
`
Usage
In your LitElement class:
`javascript
static get properties() {
return {
_query: { type: String },
_isMobile: { type: Boolean }
}
}
constructor() {
super();
this._query = '(max-width: 460px)';
this._isMobile = false;
}
render() {
return html
;
}
_handleMediaQuery(event) {
this._isMobile = event.detail.value;
}
`
Variable value from the event is a Boolean. Will be true if the media query is fulfilled, otherwise is false.
In this example, when the viewport is less than 460px the variable _isMobile will be true.
Browser compatibility
lit-media-query uses Visual Viewport API which is not yet compatible with all browsers, but it will fall back to window onresize event, increasing the browsers compatibility.
Contributing
1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature`