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

38 votes348 views5 answers
Roboto
CSS
21 votes339 views3 answers
How to create a circle with css
CSS
2 votes383 views1 answer
Css image to white
CSS
164 votes407 views4 answers
Html head css link
CSS
0 vote316 views1 answer
Css varianbes
CSS
0 vote322 views1 answer
Materialize css icon
CSS Materialize
0 vote332 views1 answer
How to make tet itali in css
CSS
0 vote348 views1 answer
Css broken image has top margin?
CSS
0 vote345 views2 answers
Roles
CSS
15 votes356 views3 answers
Drop shadow image css
CSS