Why are media queries used in CSS?

A responsive site design is made using the Media query in CSS. It indicates that a web page's display varies from system to system depending on the screen or media type. The breakpoint indicates the device width at which the content first begins to distort or break.

When you wish to alter your website or application based on a device's overall kind (such as print vs. screen) or particular qualities and parameters (such as screen resolution or browser viewport width).