Are CSS @media query statements cascading properties specified in em unit?

Question

Assuming there are two CSS @media queries as in the following sample:

@media screen and (min-width:720px) {body{font-size: 2em;}}
@media screen and (max-width:1280px) {body{font-size: 0.5em;}}

what would be expected body font-size if page is viewed in the device with 1280 x 800 screen resolution (namely: 2em, 0.5em or 1em)?

For added clarity: in this context 'cascading' means that the result will be calculated by consequently applying all matching cases, i.e. 2em * 0.5em.

By analogy, having CSS like this:

TEST1<div style="font-size:2em">TEST2<div style="font-size:0.5em">TEST3</div></div> 

the font-size of inner TEST3 text will be 1em (2em * 0.5em = 1em, i.e. the same as of original TEST1). See on jsfiddle: https://jsfiddle.net/bj3xsanq/2/

Answer 1

In your example, font size will end up being 0.5em, because the second font-size definition overrides the first one according to the usual CSS rules.

And if you would change the order of the two media queries, then the resulting font size would be 2em.

---

Here's a snippet which demonstrates this.

Note that the text will be bold (1st media query), italic (2nd media query) and red (the definition from the 2nd media query "wins" according to the usual CSS rules).

Font-size will be set to 0.5em, because the 2nd definition overwrites the first one (NOT 1em, as it would be if the 2nd definition would be applied cumulatively "on top" of the 1st one).

@media screen and (max-width:10000px) {
  p.styled {
    color: blue;
    font-weight: bold;
    font-size: 2em;
  }
}

@media screen and (min-width:1px) {
  p.styled {
    color: red;
    font-style: italic;
    font-size: 0.5em;
  }
}

<p class="styled">Text with styles from both media queries applied.</p>
<p>Text with no styles applied.</p>