Nested Media Queries

Media queries are a feature of CSS that allow you to apply different styles to a webpage based on the characteristics of the device that is viewing the page. They are often used to create responsive designs that look good on a wide range of devices, from desktop computers to smartphones.

You can nest media queries inside other media queries to create more complex responsive designs. This allows you to apply different styles based on multiple criteria, such as the width and height of the viewport, or the device’s orientation.

You can nest media queries in native CSS, as long as you’re doing it from the root:

@media not print {
  @media (min-width: 0) {
    p {
      background: blue;
    }
  }
}