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.

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.

Published
Categorized as Code Tagged

By Peter Wilson

Peter has worked on the web for twenty years on everything from table based layouts in the 90s to enterprise grade CMS development. Peter’s a big fan of musical theatre and often encourages his industry colleagues to join him for a show or two in New York or in the West End.

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.