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

3 votes137 views2 answers
Card template css
CSS
11 votes128 views2 answers
Css hr color
CSS
0 vote145 views1 answer
React bootstrap css module use media query mixin
CSS
9 votes149 views4 answers
Animation shorthand css
CSS
4 votes141 views1 answer
How to make image not repeat on background
CSS
3 votes204 views3 answers
Font shadow css
CSS
1 vote165 views1 answer
How to write remark in css
CSS
0 vote141 views1 answer
Tag name css doesn't work
CSS
0 vote145 views1 answer
Iterating data font size as to be decreased in Angular by using css
CSS
0 vote160 views1 answer
Htnl css
CSS