_media doesn't evaluate dynamically

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:

1. The resize event: Listening to the event (ideally debounced), we can set the current screen dimensions after the window has been resized.
2. The matchMedia() function: Using matchMedia, we can attach CSS media queries to the window object 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.

[SamTolmay]

This is already a feature that we forgot to document properly 😅. You can see #685 for reference.

At least this means the schema we have is intuitive

[Radiergummi]

Maybe another solution for responsive layouts would be to have additional, size-dependent layout subkeys?

layout:
  span: 24
  md:
    span:
      12
  lg:
    span:
      8  

The above example would simply add the layout classes with some kind of CSS media query, similar to how TailwindCSS does it. What do you think?