What should be the width of adaptive blocks?

Question

css

Hello.
I decided that I would do an adaptive for the trail. screen extensions:
375
425
768
1024
>1024
I have a question. If the media query has max-width: 1024px, how wide should the container be!?
To be honest, I don't quite understand. If I make for example 980px. Then, with a screen width of 800px, everything will go, but the media request for 768px will not turn on yet.
Logic suggests that you should immediately make a container under 768px on monitors > 768 && < 1024.
Or write even smaller media queries?
But judging by the devices, there are just thousands of different ones:
spirelightmedia.com/resources/responsive-design-de...

Answer 1

Each block should be able to display itself correctly at any width from 320. Media queries should be written specifically for blocks, and not globally applied to the entire layout. There, half of the Internet travels because of this. It is unrealistic to subordinate every single block on the site to one set of ranges. Especially what ranges, where do these lists come from? The screen can be anything.
It also happens that it is very necessary to make media queries to the elements, and not to the window. For example, when the left menu disappears, the main block becomes large again, although the window is reduced. There is such a thing https://github.com/marcj/css-element-queries, but it should be used as a corrective, that is, the second number after the usual media queries, since it does not work out a little immediately after loading the page

Answer 2

You have strange screen parameters for adaptive. I make under the parameters from the bootstrap, they are popular with the rest.
https://bootstrap-4.ru/docs/4.1/layout/grid/
So make the container not fixed, but give max-width and if the screen shrinks, it will adapt to it.

Answer 3

I make the container 100 percent :)
I have the following adaptive:
- 767
- 992
-1200
And everything is fine.