17 replies

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)

@media (min-width: 50rem)

@media (min-width: 50em)

@media (min-width: 50em)

is referring the browsers font-size, even if you've changed your html

font-size

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)

@container(min-width: 50rem)

@container(min-width: 50em)

@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%;}

:root {font-size: 62.5%;}

then a container query in

rem

rem

would be calculating/resolving 1rem=10px.
if youve changed the containers font-size

.container {font-size: 32px"

.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 Container queries: are "em" units computed using container ems or contained ems? about the @container spec that

1em

1em

looks at the containers font-size but want to confirm:
- the @media is not looking at your

 :root {font-size: ...}

 :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

1rem

is looking at what youve defined in your

:root {font-size: ...}

:root {font-size: ...}

KP-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)

@media (min-width: 50rem)

@media (min-width: 50em)

@media (min-width: 50em)

is referring the browsers font-size, even if you've changed your html

font-size

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)

@container(min-width: 50rem)

@container(min-width: 50em)

@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%;}

:root {font-size: 62.5%;}

then a container query in

rem

rem

would be calculating/resolving 1rem=10px.
if youve changed the containers font-size

.container {font-size: 32px"

.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 Container queries: are "em" units computed using container ems or contained ems? about the @container spec that

1em

1em

looks at the containers font-size but want to confirm:
- the @media is not looking at your

 :root {font-size: ...}

 :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

1rem

is looking at what youve defined in your

:root {font-size: ...}

:root {font-size: ...}

em scope in @media and @container

em scope in @media and @container

Similar Threads

Similar Threads

Similar Threads