What is a media query and how it can be used?

Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

Media queries are used for the following:

• To conditionally apply styles with the CSS @media and @import at-rules.
• To target specific media for the <style>, <link>, <source>, and other HTML elements with the media= attribute.
• To test and monitor media states using the Window.matchMedia() and MediaQueryList.addListener() JavaScript methods.

@media (max-width: 12450px) { ... }

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries