Where as a media query applies to the viewport of a device or page, an element query is affected by its own dimensions.
When a media query is passed into the element query, akyral-element-query polyfills
element query functionality into its parent. When media query is successfully
matches against the element, the media attribute of the akyral-element-query is updated.
You then can databind or event listeners to reactively use that media attribute for styling.
Your can adjust the slider to visualize the different queries associated with the below element.
If you haven't used Polymer before you can checkout out the Getting the Code and Using the Elements guides for a quick introduction to Polymer.
Once your all setup with Polymer, you can install it directly into your project with Bower.
$ bower install akyral-element-query --save
akyral-element-query requires its parent css position be set to absolute or relative to work correctly.
Be aware of circular style references with element query styles @see. One style may cause cycling between another and back again. Avoid defining a fixed width in components.
{{media}} media query .