CODEWITHSUNDEEP
css
stackoverflowrocks
stackoverflowrocks

Reputation: 717

CSS media query in ems thrown off by browser font size

Please see my updated post below "EDIT".

I wrote some CSS media queries to display or not display some page elements based on the em width of the screen. I'm finding that changing the font size and/or minimum font size in Chrome throws it off which I thought wasn't supposed to happen with ems. I set up a simple jsfiddle to illustrate this:

http://jsfiddle.net/ekfbfd8c/1/

<div> These kittens are all in a row. They are so cute.</div>
<img src="http://ochumanesociety.com/clients/3697/images/kittens.jpg" />

img { width: 25em; display: none; border: 1px solid #000000 }
@media only screen
and (min-width : 25em)
{
    img { display: inline; }
}

The text stretches to various widths along the image depending on the font size set in the browser even though the image's width is defined in ems, and the image appears and disappears at slightly different points even though the media query is written in ems.

EDIT:

Here is a much better demonstration of the problem:

http://jsfiddle.net/upLokzrk/

<div>0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9</div>

div { display: none; }
@media only screen
and (min-width : 16em)
{
    div { display: block; }
}

As the window is narrowed, the text wraps to varying degrees before disappearing. Since the media query is written in ems, the text should always wrap to the same degree before disappearing. Here are the number of characters which wrap for me in Chrome before the text disappears:

laptop with "Very Small" font size: 6

laptop with "Very Large" font size: 4

laptop with "Very Small" font size and 16 minimum font size: 12

55" HDTV with "Very Small" font size: 2

55" HDTV with "Very Large" font size: 0

55" HDTV with "Very Small" font size and 16 minimum font size: 9

How can I make the media query trigger synchronize with the width of the text?

Upvotes: 0

Views: 397

Answers (1)

whaley
whaley

Reputation: 645

Everything is working okay over here.

Em's cascade, except when used in media queries. When used in media queries they are based on the root font size of the browser, which is usually 16px.

Setting your media queries in pixels won't help anything, because em's in media queries aren't affected by the font size of the body. Setting your media queries in pixels and might actually cause more problems, or used to at least, because when people zoom, the media queries set in pixels, won't zoom along with the rest of your page.

What I think is happening is that when you change the font size of the body, everything gets smaller, but the media query remains the same size.

I forked your JSFiddle and changed all the font-size values to show you that the media query remains untouched.

body {
  font-size: 0.5em; /* half */
}

img {
  width: 25em;
  display: none;
  border: 1px solid #000
}

@media only screen and (min-width : 25em) {
  div {
    font-size: 2em; /* double */
  }
  img {
    font-size: 2em; /* double */
    display: inline;
  }
}

Upvotes: 0

Related Questions