Created attachment 1649 [details]
basic example

I have been thinking about element queries and math-based css selectors to enhance modular web development and presentation of html fragments in different scenarios.

The most simple method (in terms of backwards compatibility and complexity) i came up with is the following approach:

Introduce a new html attribute or css property that can be applied on certain html tags to reset the viewport (base for media query calculations). Once media queries are evaluated the viewport root is used for calculation instead of the screen. As a fallback (height for example) the screen/media will be used.

That way you could style widgets/html fragments for the context they are displayed in (instead of the media they are rendered on).

A css property (like: viewport:reset or media:reset-viewport) or a html attribute (<section resetviewport></section>) would be necessary.

I think many other approaches (element query or math-based selectors) to handle the problem of "adaptive layouts" have massive downsides.

let me know what you think about this.