What is the best way to implement responsiveness in Vue, React and Angular?

Question

Angular

I proceed from the fact that the component in popular frameworks is self-sufficient and is a "black box", i.e. it has an interface in the form of received parameters and returns events. Since the component "does not know" where and how it is located on the page, it is somehow wrong to specify the media query component in the styles. Vue has several solutions, but they are based on JavaScript, which causes inconsistencies on the server rendering and subsequent hydration on the client - on the server there are no screen sizes, so the "default" option is shown.
Or, based on the size of the screen, you need to show either one component or the other. Since in these frameworks, fortunately, this is achieved not by setting display: none and display: block, but by adding / removing the corresponding components to / from the DOM, the same inconsistencies can occur with SSR and data hydration in the browser.
How to deal with it?

Answer 1

I did not understand anything. bootstrap-vue works fine, as do most other off-the-shelf frameworks

Answer 2

Of course, it's too late, but maybe it will come in handy for someone:
https://webformyself.com/sozdanie-adaptivnyx-vue-k...