Explain the use of Media Queries in CSS ?

Media queries in CSS allow you to apply styles based on various characteristics of the user’s device, such as screen size, resolution, or device orientation. They enable the creation of responsive and adaptive designs, ensuring a seamless user experience across different devices.

Syntax:

/* Example of using a media query */

@media screen and (max-width: 600px) {
  /* Styles to apply when the screen width is 600 pixels or less */
  body {
    font-size: 14px;
  }
}

Features:

• Responsive Design: Media queries are a fundamental component of responsive web design, allowing styles to adapt to different screen sizes and resolutions.
• Conditions: Media queries consist of conditions, such as max-width, min-width, orientation, etc., which determine when the styles inside the query block should be applied.
• Breakpoints: Commonly used with breakpoints, media queries help define specific points at which the layout or styling of a webpage should change.