xtal-match-media - Vaadin Add-on Directory
Custom Element that watches for media matches
[](https://www.webcomponents.org/element/xtal-match-media)
# \
Web component that watches for media matches and fires events when they happen.
This is similar to Polymer's [iron-media-query](https://www.webcomponents.org/element/@polymer/iron-media-query), but with no legacy dependencies. xtal-match-media can partake in Polymer's powerful binding.
Other alternatives are also available (the more the merrier):
> lit-media-query (https://www.webcomponents.org/element/lit-media-query)
```
-->
## Install the Polymer-CLI
First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.
## Viewing Your Element
```
$ polymer serve
```