Open
Description
The _media operator returns information about the current screen dimensions, but doesn't update them if the size changes during client runtime.
Ideally, the data would change if the window is resized, so block visibility could be controlled by media queries, similar to CSS.
There's mainly two ways this can be achieved in modern browsers:
- The
resizeevent:
Listening to the event (ideally debounced), we can set the current screen dimensions after the window has been resized. - The
matchMedia()function:
UsingmatchMedia, we can attach CSS media queries to thewindowobject and add event listeners that will be triggered if the query starts to match, or doesn't match any longer. This allows to set named breakpoints (eg.sm,lg, etc.) in the application state.
By implementing those features combined, we could have up-to-date media query information available.