Media query not working with rem

/*
Media query declarations do not base themselves on the declared font-size that you apply to html
and instead always use the default size - 
which is 16px in most browsers

Relative units in media queries are based on the initial value, 
which means that units are never based on results of declarations. 
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.
*/

html {
  font-size: 10px;
}

@media screen and (min-width: 50rem){ /* 800px (uses base font-size) */
  div.somediv {
    width: 50rem; /* 500px (uses the declared html font-size) */
  }
}

Source: stackoverflow.com

Similar codes

0 vote247 views1 answer
Twig currency name
CSS
-2 votes264 views2 answers
Tailwind border bottom
CSS
0 vote230 views1 answer
Sdsd
CSS
30 votes258 views6 answers
Background image with gradient css
CSS
1 vote234 views1 answer
Padding clamp
CSS
0 vote255 views1 answer
Añadir hojas css externas a wordpress
CSS
0 vote255 views1 answer
Css layers over background-images
CSS
0 vote251 views2 answers
Html css change reading direction
CSS
0 vote259 views1 answer
Line-break
CSS
0 vote266 views1 answer
@font-face
CSS