What is the difference between fluid layout and media queries?

Question

css

There is a misunderstanding and some lack of structure in the head on the topic of adaptive layout.
There is a fluid layout approach (everything is based on percentages and relative values) and there is also the ability to adapt the page using media queries.
Are they two separate tools that perform the same task?
Or are these two tools that should always work together?
Are there any other useful tools/bundles of tools?
Thanks in advance.

Answer 1

Are they two separate tools that perform the same task?

Yes, they are both designed to adapt the page to the screen size. The difference is that with the help of media queries, “tipping points” are set when the page display changes dramatically (block order, sizes, indents, etc.). Fluid layout adapts not when reaching some points, but constantly, every pixel, but its capabilities are limited.

Or are these two tools that should always work together?

These tools can be used together, but they don't have to. Whether this should be done depends on the design.
We can say that media queries form several canvases of different sizes, and the fluid layout is responsible for ensuring that the elements inside the canvas are arranged proportionally.