why media queries is not working?
isn't the 'em' unit used in media query is relative to the root font size, which is 10px. Therefore, 50em should be 50 * 10px = 500px. but I am not getting expected result.
46 Replies
Em is not relative to the root font size, that would be rem, which I suggest using for media queries, em is relative to the font size of the parent.
And from what I can see, if you want the background to turn red after the viewport hits 500px in width you want to be using min-width not max-width, max-width in this case would be 500px or lower, min-width would be 500px or above
i am just curious what might be the relative parent of media queries ?
In this case your ems are relative to the root font size but in other cases they tend not to be
Even If I am using font-size 10px on body. The media query still activates below 800px it does not change to 500px
https://codepen.io/AparAwasthi/pen/BavvzEL
If my ems are relative to root font size then breakpoint should be 500px right?
em and rem don't work like that in media queries
they will ALWAYS assume a font size of 16px
so, 16x50 = 800
it's also bad for accessibility to set the font-size in pixels on the HTML element
you should be using ems and rems throughout, otherwise your setting will override the user's changed font size and make it harder for people to use your site if they need the font a bit bigger than you decided it should be
https://drafts.csswg.org/mediaqueries/#units <-- i found the spec
i think em == rem in media queries it also looks at the font set in the browser settings not what you declared in css
the spec says "initial value"
im not sure if user style sheets are considered as part of the "initial value"
https://drafts.csswg.org/css-cascade-5/#initial-value <-- this is as vague as it gets
For example, in HTML, the em unit is relative to the initial value of font-size, defined by the user agent or the user’s preferences, not any styling on the page.Emphasis mine or do you mean user style sheets as in userChrome.css or Stylus?
those
i think those are just injected into the html
for Stylus and addons like that I'm 99% sure, userChrome might be different
emphasis on might
still, don't override your font size in pixels in the
html/:root selector, only villains do thatwhat i've seen people do is set the font-size in html to 62.5%, so 1rem = 10px
if you really, really want to have your rems equal 10px, that's what you do yeah
it's much easier to just remember 0.125rem == 2px and realize you probably don't need smaller increments than that anyway
yeah, personally, i find it easier to think of 1rem as 16px
I try not to even think about pixels that much
i use sass, so, i just made a function that converts px to rem
but we're getting way off track for the question, which has been answered probably 🙂
yes, rem and em = 16px, usually, in media queries
can't change it, don't try
Just to reitterate though: Using
html { font-size: 10px; } basically tells up to ten percent of your users with visual impairments to fuck off and not give you their businesseven without visual impairments ... 10px is micro tiny
oh, it's not that. Usually people then set body{ font-size: 1.6rem; } or something to reset the size back to normal. A fixed unit font size will override the user's preference set in the browser. If I need 24px font to read comfortably, a proper website would scale its font relative dimensions to 1.5x, from text to some appropriate margins, or wherever you use ems and rems. If you set font-size: something px on an element, that is hard coded now and won't be overridden by the browser anymore unless you use zoom
hell i didn't even know that one haha
so if you set it on html, my increased font size that would let me use your damn site, suddenly does absolutely nothing
that sounds like a bad bad idea
exactly
which is why i don't do it!
it's something funky as hell that people don't always know
because it's something that people don't expect
and why @Dipesh sapkota shouldn't either 🙂
people (kinda rightfully) expect the relative font units to just work, but if you think about it, they will be relative to what?
yeah i always use a root of 16px so i never really ventured out of that lol
please don't
just set the body font size to
1remno no
i don't mean that
i mean i never change it
like i don't define a new value there
oh, the 10px was just as an example?
to make it obvious?
wait what?
im mixing people up
sorry, i just woke up
i thought so haha
all good, dw
but yeah, it's good that you don't put any font size in the html, but in the body
I would never do that, i was just curious why it was not working.
I just wanted to know how media queries will take em's and rems
the short answer is that they (usually) assume 16px
Thank you for very much for your research.
you're welcome
@ἔρως But that raises a new debate. What's the benefit of using em or rem with media queries why not use px only.
the mental model
you might be more mentally "attuned" to use rems instead of pixels
specially if you use rems all over
but honestly? i wouldn't use rems or ems in media queries, as you won't buy a phone that's 50rems by 140rems
you buy a phone that has a screen size in pixels
use PX
REM/EM in a media query do not behave how you think they do.
The only benefit to using EM was for constancy in Safari, which as I understand is no longer the case.