Is it possible to nest media queries within media queries?

Question

Is this possible? It seems like a neat solution to me, but I\'m not sure if it will work.

@media only screen 
and (mi         


        

Answer 1

I think not possible but you can write this format If you are using SASS css pre-processor.

example , you can copy this code and paste to https://www.sassmeister.com/ -and watch the output

SASS

@media only screen and (max-width: 767px) {
  body{
    color:red;
  }
   @media (orientation:portrait) {
       body{
        color:green;
      }
   }
   @media (orientation:landscape) {
       body{
        color:orange;
      }
   }
}

Output CSS

@media only screen and (max-width: 767px) {
  body {
    color: red;
  }
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
  body {
    color: green;
  }
}
@media only screen and (max-width: 767px) and (orientation: landscape) {
  body {
    color: orange;
  }
}