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).
Syntax:
@media not|only mediatype and (expressions) {
// css-Code;
}
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 , , , and other HTML elements with the media= attribute.
To test and monitor media states using the Window.matchMedia() and MediaQueryList.addListener() JavaScript methods.