What media queries are best done when building a website?

Question

css

Let's assume a layout with a desktop version (1200px) and for mobile (480px). The question is, is it possible to rebuild the blocks, as in the mobile version, before the screen reaches a width of 480px, for example, when the width is 576px, or will this be a mistake? That is, it is expected that from the disktop version to the mobile version there will be rubber, but if the blocks can no longer compress, it starts to look bad, then I can rebuild them earlier, like in the mobile version?

Answer 1

Bootstrap-type css frameworks have worked out media queries , which, by and large, are enough for eyes and ears.
And then you need to jump from a specific task, for example, the size of the header on media queries can directly depend on both the screen size and the content of the navigation in the line. In my practice, there have been cases when, having added 1 menu item, I had to rewrite media queries in such a way that it would not be transferred to a new line and would not break the layout. However, these are special cases.

Answer 2

Yes, you can want whatever media queries you want, like media (min-width: 480px and max-width: 576px) { @content; }

Answer 3

That is, it is expected that from the disktop version to the mobile version there will be rubber, but if the blocks can no longer compress, it starts to look bad, then I can rebuild them earlier, like in the mobile version?

You can rebuild at least for every pixel of width (height, etc.), or specify ranges (min/max). If I understood your question correctly - you can rebuild individual elements starting from a resolution in which [as you put it] "blocks can no longer be compressed", i.e. adapt these very blocks "separately" from other elements.
In particular, you can separately redefine the properties for individual blocks, starting with the resolution you need.