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

0 vote312 views1 answer
Css click through after
CSS
0 vote323 views1 answer
How to center an overlay button using css transform and translate
CSS
85 votes329 views5 answers
Justify content css
CSS
0 vote283 views1 answer
Css media query aspect ratio
CSS
28 votes320 views3 answers
Display sm none
CSS
2 votes306 views1 answer
How to distribute vertically the items in css
CSS
9 votes353 views3 answers
Bootstrap blue outline button
CSS Bootstrap
0 vote308 views1 answer
How to change logo size in wordpress
CSS
50 votes279 views5 answers
Child css
CSS
2 votes375 views1 answer
Material design css
CSS