Discuss Media Queries in CSS?

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 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.