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 vote262 views1 answer
How to make a text in center with background color in css
CSS
1 vote340 views1 answer
Import maxcdn.bootstrapcdn.com not in index.html in specific component file
CSS Bootstrap
11 votes302 views2 answers
Css click through an element
CSS
1 vote281 views2 answers
Vim unset number
CSS
0 vote351 views1 answer
Ratio bootstrap
CSS Bootstrap
0 vote281 views1 answer
Input rtl html
CSS
0 vote284 views1 answer
Twig date modify
CSS
22 votes277 views5 answers
Circle css
CSS
0 vote287 views1 answer
Add css file through jquery
CSS
0 vote272 views1 answer
Css video background
CSS