lit-media-query
Web component for media queries (like iron-media-query) implemented with LitElement.
See Documentation, Demo.
Installation
npm install lit-media-query --save
Then, import lit-media-query into your element:
import 'lit-media-query/lit-media-query.js';
or in an html file:
<script type="module" src="/path/to/lit-media-query.js"></script>
Usage
In your LitElement class:
static get properties() {
return {
_query: { type: String },
_isMobile: { type: Boolean }
}
}
constructor() {
super();
this._query = '(max-width: 460px)';
this._isMobile = false;
}
render() {
return html`
<lit-media-query
.query="${this._query}"
@changed="${this._handleMediaQuery}">
</lit-media-query>
`;
}
_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
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D