What are media queries and how to use them?

Media queries are a feature in CSS that allow you to apply different styles based on the characteristics of the device or screen, such as its width, height, or orientation. You can use media queries to create responsive designs that adapt to different screen sizes and types.

To use media queries, you define the conditions under which certain styles should apply using the @media rule in your CSS. For example, you can specify that a particular style should only apply when the screen width is below a certain value, or when the screen is in a specific orientation. This allows you to create styles that adjust dynamically based on the device's characteristics.

                        
/* General styles for all devices */
body {
  font-size: 16px;
  color: #333;
}

/* Styles for devices with a screen width greater than 600px */
@media (min-width: 600px) {
  body {
    font-size: 18px;
  }
}

/* Styles for devices with a screen width greater than 1200px */
@media (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}