How to change css styles based on window size, but without using media queries?

Question

css

I am making a simple page. More precisely, not even a page, but a certain block. This block as a widget will be embedded in third-party sites. Those. Roughly speaking, in some, let's call it a "third-party container", which can be anything in width. And I need to ensure that my block is adaptive. You understand that the use of media queries (@media) disappears, because they take into account the size of the screen, and the appearance of my block should not depend on the size of the screen, but on the size of the outer container. It would be possible to make the block just rubber, but this is not enough, because. there are some elements that should change appearance depending on the width of the block. How to be in such a situation? I see only one solution - using js. Those. inside js, we determine the size of the third-party container in which our block is embedded, and create conditions (actually similar to how it is done in css with media queries) and, depending on the condition (container width), we apply certain modifier classes in addition to the main classes of block elements. A question for experienced front-end developers - is this the correct solution and are there any other options?

Answer 1

There is a technique for emulating a single breakpoint via min-width, max-width and calc.
This "breakpoint" depends on the size of the container, not the width of the window - perfect for widgets.
codepen.io/paulradzkov/pen/NNgVEO is an example.
https://medium.freecodecamp.com/the-fab-four-techn... - here is an article describing how it works.