How to use media queries correctly?

Question

css

Can you please tell me how to use media queries in CSS for responsive layout? What to take the maximum screen width and what media query to use?
@media only screen and (max-width:1920px) or @media only screen and (min-width:1200px) ?
Does it make sense to layout for screens with a width above 1920px?

Answer 1

It all depends on the task and coverage of the devices for which you need to implement the layout.
Alternatively, for a project without strict breakpoint requirements and clarification of supported devices, you can rely on the Bootstrap approach (current version is 4.4), their grid uses several breakpoints:
Reference link: https://getbootstrap.com/docs/4.4/layout/overview/...

Answer 2

1. See how it's done in frames .
2. The need depends on the task and funding. But in general, the concept of mobile first involves increasing media queries, i.e. @media (min-width: 1200px) { ... }, for example, it will also capture 1920.
3. It is necessary to test the layout in combat conditions. Sometimes it is worth adding xxl size to harmoniously arrange the elements.