Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
17 replies
curiousmissfox

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*/


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*/


I do remember Container queries: are "em" units computed using container ems or contained ems? 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: ...} ✅
Was this page helpful?