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

19 votes189 views2 answers
Css circle card
CSS
6 votes202 views5 answers
Font-style css
CSS
0 vote176 views1 answer
Poretty print css
CSS
4 votes179 views1 answer
Bootstrap file select class
CSS
0 vote195 views1 answer
Css border image repeat property
CSS
0 vote164 views2 answers
Link html to html stackoverflow
CSS
0 vote179 views2 answers
Order
CSS
0 vote169 views1 answer
Htnl css
CSS
0 vote164 views2 answers
How to define max number of character for a paragraph css
CSS
-1 vote181 views1 answer
883 usd to nis
CSS