About the MediaQuery category

MediaQuery: ## Feature 1

Add CustomMediaQuery in your view with a action and a Media query.
When the result of the CSS media query result changed, call the action.
This helps to build responsive UI from the Java side.
For example, you can show a component only if the width of the view is less than 800px.

Use Case

Display or hide a column for a Vaadin Grid if screen size < 1000px

Feature 2

Use ClientMediaQuery to update your styles from Java.

Feature 3

ElementMediaQuery is similar to CustomMediaQuery but you can apply the Media Query to an element.
For example, you can show a component only if the width of the component is less than 800px.
It’s based on ResizeObserver so not working in Internet Explorer 11. Can I use... Support tables for HTML5, CSS3, etc
It’s heavier than CustomMediaQuery since it emulates the native media query to an element in Javascript.

You can find an example in github.