Relative Unit Based Media Queries

Based on the standard browser font-size of 16px, the following media query to have an affect on screens 160 pixels wide and up.

@media only screen and ( min-width : 10em ) {
  html {
    background-color: #ddd;
  }
}

Now, I would expect adding the following code would cause the media query above to have an affect on screens 320 pixels wide and up.

html {
  font-size: 2em;
}

In reality, the media query still takes an effect at 160 pixels wide. I’m not sure I see the logic, but any hints would be appreciated.

Filed under things I learnt today.

Update

Put simply, it’s to prevent looping conditions. Consider the following CSS

html {
  font-size: 1em; /* ie, the default */
}

@media only screen and ( min-width : 10em ) {
  html {
    font-size: 2em;
  }
}

At a font-size of 1em, the media query affects screens 160px wide and wider. If the font size affected the media query, once the media query is active, it should then only have an effect on screen 320px wide and wider.

To put it another way, once the media query becomes active, to should no longer be active.

A similar problem faces those considering element queries.

Note: Initially I used rems for the examples. Both rem and em based media queries use the browser’s default font-size, so I’ve switched to the more common use case.