Kevin Powell - Community•5mo ago

em scope in @media and @container

Am I remembering correctly that in an @media query, using ems or rems e.g. @media (min-width: 50rem) or @media (min-width: 50em) is referring the browsers font-size, even if you've changed your html font-size to something like 62.5% , its still using 1rem = 16px and 1em=16px?

:root {font-size: 62.5%; /*dont do this*/}
.parent { font-size: 32px; /*never use px for font-sizes!*/}
@media (min-width: 50rem) { 
  .child {background-color: purple;}
}
@media (min-width: 50em) { 
  .child {border-style: dotted;}
}
/* 1rem = 10px but browsers font-size is still 16px so in this media query 1rem=16px and at 800px and larger, childs bg is purple AND has a dotted border*/

:root {font-size: 62.5%; /*dont do this*/}
.parent { font-size: 32px; /*never use px for font-sizes!*/}
@media (min-width: 50rem) { 
  .child {background-color: purple;}
}
@media (min-width: 50em) { 
  .child {border-style: dotted;}
}
/* 1rem = 10px but browsers font-size is still 16px so in this media query 1rem=16px and at 800px and larger, childs bg is purple AND has a dotted border*/

but within a container query @container(min-width: 50rem) or @container(min-width: 50em) rem is referring to what youve defined as your root font-size (so if you've changed your :root {font-size: 62.5%;} then a container query in rem would be calculating/resolving 1rem=10px. if youve changed the containers font-size .container {font-size: 32px" the container query would be calculating/resolving 1em=32px ?

:root {font-size: 62.5%;}
.parent { container-type: inline-size; font-size: 32px;}
@container (min-width: 50rem) { 
  .child {background-color: purple;}
}
@container (min-width: 50em) { 
  .child {background-color: green;}
}
/* 1rem = 10px ; childs bg is purple at 500px and larger*/
/* 1em = 32px ; childs bg is green at 1600px and larger*/

:root {font-size: 62.5%;}
.parent { container-type: inline-size; font-size: 32px;}
@container (min-width: 50rem) { 
  .child {background-color: purple;}
}
@container (min-width: 50em) { 
  .child {background-color: green;}
}
/* 1rem = 10px ; childs bg is purple at 500px and larger*/
/* 1em = 32px ; childs bg is green at 1600px and larger*/

I do remember a post about the @container spec that 1em looks at the containers font-size but want to confirm: - the @media is not looking at your :root {font-size: ...}, its looking at the browsers root (which can either be 16px or what the user sets as their preferred font size) ✅
- in @container 1rem is looking at what youve defined in your :root {font-size: ...} ✅

11 Replies

clevermissfoxOP•5mo ago

This was the post on here and just want to make sure my comment is correct and im not misinforming anyone https://discord.com/channels/436251713830125568/1263698086400753725/1263854857685696553

Mannix•5mo ago

media looks at the browser setting not sure about container

clevermissfoxOP•5mo ago

asking an AI , it says that rems in a container are looking at what youve defined in your :root which i believe is correct, was just looking for confirmation . Also for the @media (min-width: 50rem) is it always 1rem=16px or will it change if the user changes their font-size? If user has a font-size set at 20px, will @media (min-width: 50rem) then resolve as 1rem=20px? ✅ (yes it will)

Mannix•5mo ago

yes it will change the 1rem to whatever value user has chosen if it's set to 16px it will be 800px and if 20px it will be 1000px

clevermissfoxOP•5mo ago

yep i just tested it. interesting (at least to me) , it only gives a select menu dropdown of 'very small, small, medium, large, very large'. i thought there may be a slider that was between 10px and 32px or something. so who knows what the pixel size of 'very small' is

Mannix•5mo ago

I use Vivaldi browser so i have px to chose from instead of meaningless value like very small xD but it's probably 8 10 or 12 px

clevermissfoxOP•5mo ago

yeah i think its 8px its quite small. or should i say 'very small'

Kevin Powell•5mo ago

What you asked off the top is correct, in how both media and container queries work 🙂 I will say, don't ask AI CSS questions though. If you'd asked it about how media queries work with rem, it most likely would have got it wrong. I have an upcoming video where I ask 3 different LLMs CSS questions you'd think they'd get right, and they make really dumb mistakes. I also said "most likely" because I know they get that wrong most of the time, as I asked a related question to that, 2 of the 3 of them got it wrong 😄 - and the one that got it right had the worst performance overall, lol

clevermissfoxOP•5mo ago

I mostly am looking for the sources it cites to verify myself so using it like a search engine that is better at finding the right keywords than I am but yes get your point and agree; I only ask coding questions i know I can fix or verify with the sources it cites; otherwise I post my questions here 😆 Do I have to wait for the video to drop or are you willing to share which 3 you used ? I’ve found Perplexity the best one to help refactor my JavaScript and surprisingly only had to fix a few small things but it did a pretty good job. It’s also good at adding comments into code that’s pretty accurate

Kevin Powell•5mo ago

I used Copilot, which uses GPT-4 turbo, Gemini, and Claude, because I've heard Claude is the best for coding related things, and to be fair, it did perform the best out of the 3, though it missed pretty bad on a few questions.

clevermissfoxOP•5mo ago

I tried copilot for some dummy data about 2 months ago and was so so frustrated with it. I have taken a course on engineering prompts too and thought the prompts I gave it were pretty clear but out of any AI I've tried to play with (whivh is only maybe 6 total), copilot was by far the worst. But that was 2 months ago and things move fast although sounds like Microsoft has been focused on other areas this week. Give perplexity a try sometime if you want to keep comparing, I'd be curious how it performs for css as I've really only fed it javascript that's already written and needs tweaks or debugging. Looking fwd to that video and curious to see what you asked it !

Gaming

Programming

em scope in @media and @container