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 vote255 views2 answers
Css div side rounded
CSS
3 votes246 views2 answers
How center content in css by using flex
CSS
0 vote224 views1 answer
How to select classes that start with a certian name
CSS
9 votes249 views3 answers
Css grid repeat
CSS
0 vote240 views1 answer
How to add css to alt attribute text
CSS
13 votes214 views4 answers
Delected blue border when an input is selected
CSS
2 votes243 views6 answers
Add image to css
CSS
0 vote253 views1 answer
Dynamic multi-level in vuejs
CSS
1 vote212 views1 answer
-webkit css
CSS
8 votes288 views2 answers
How to add border in css
CSS