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

1 vote206 views1 answer
Circle css with text in the center
CSS
0 vote202 views1 answer
Td min-height not working
CSS
1 vote186 views1 answer
Qwant
CSS
3 votes189 views1 answer
Css scrollbar position to bottom
CSS
0 vote213 views1 answer
Grid style form
CSS
1 vote189 views1 answer
Change the color of an hr
CSS
0 vote194 views1 answer
Shorthand notation of declaring top, right, bottom, left position
CSS
32 votes208 views6 answers
Background image size css
CSS
3 votes230 views2 answers
DevTools failed to load SourceMap: Could not load content for bootstrap.min.css.map
CSS Bootstrap
0 vote236 views1 answer
Css inverted border radius
CSS