Can I embed media queries in media queries?

Question

Is it possible? It seems to me that this is a pure solution, but I'm not sure if this will work.

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Code for both portrait and landscape */ @media (orientation:portrait) { /* Code for just portrait */ } @media (orientation:landscape) { /* Code for just landscape */ } } 

Answer 1

You should be able to nest @media rules of this method in CSS3 , but it is not supported by most browsers. See this answer for more details.

You will need to fully extend and repeat the top-level media queries for internal rules for working in browsers (and I think the SCSS processor will generate something similar):

 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { /* Code for both portrait and landscape */ } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) { /* Code for just portrait */ } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) { /* Code for just landscape */ } 

Answer 2

If you want to do this, the best way is to use a high-level media query in the link tag, and then other queries inside the linked sheet.

In practice, although most people cascade their CSS rules from a base sheet that covers common material, and then makes changes to this in each set of multimedia rules.

Answer 3

I think this is not possible, but you can write this format. If you are using the SASS css preprocessor.

For example, you can copy this code and paste in https://www.sassmeister.com/ - and watch the weekend

Sass

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

CSS output

 @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; } }