0

I just swapped out all media queries on my company's platform from px=>em and I'm not seeing the result I expected after reading many other threads like this: Switching to Em-Based Media Queries and a handful of blogs praising em's over px.

When I have a stylesheet that is meant to only show like this:

<link rel="stylesheet" href="css/special.css?256D" type="text/css" media="screen and (max-width: 64em)">

... I want the style sheet to show up when the size of the WINDOW is below 1024px, or 64ems. My html font size is hardcoded at 16px.

When I check the ems via this handy snippet from another SO question:

$(window).width() / parseFloat($("html").css("font-size"));

... I get different values at different zoom sizes, because the value of window.width changes with the zoom. This is wrecking the mobile experience for my users since only the size of the true screen should dictate what is being displayed.

Is what I want possible without serving dynamic content via JS, etc?

Community
  • 1
  • 1
JacobIRR
  • 8,545
  • 8
  • 39
  • 68
  • I'm curious. Why, specifically, did you switch from px to em in your queries? Were you having problems using px? I've only used px, and without problems. Notably, I also hardcode the html font-size, which prevents changing the browser's default font-size from having any effect. I realize that may inconvenience some users. As I understand things, if you're hardcoding the base font-size, the benefit of using ems in your media queries is lost. – Bill Doughty Aug 19 '16 at 00:04
  • It's not clear (at least to me) what your question is. In CSS media queries the width in ems changes with zoom level but the width in pixels doesn't. Pick one or the other based on your desired behavior. – Stephen Thomas Aug 19 '16 at 00:05
  • When I console log my html font size attribute, at any zoom level, it is consistently 16px. I changed to ems because I thought it would prevent zoom from triggering media queries. Since the window width changes, are you saying that removing the hardcoded font size will allow the ems to change in sync so as to prevent the triggering of mobile style sheets on zoom? – JacobIRR Aug 19 '16 at 01:36
  • Expected behavior: media queries to enable my mobile stylesheets are only met when the screen is below 1025 px. Actual behavior: zooming in tells the media query that the screen is getting larger, inappropriately triggering the media queries – JacobIRR Aug 19 '16 at 01:39
  • This question could almost be rephrased as: how can you make media queries use window.outerWidth as a reference, instead of innerWidth – JacobIRR Aug 19 '16 at 03:26

0 Answers0