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

13 votes239 views4 answers
Delected blue border when an input is selected
CSS
5 votes315 views1 answer
Css how does hsl work
CSS
1 vote289 views1 answer
Css invert columns
CSS
2 votes267 views1 answer
Kerning css
CSS
22 votes266 views4 answers
Css center in grid
CSS
0 vote246 views1 answer
Siteorigin hide row
CSS
1 vote274 views1 answer
Padding for text in html
CSS
0 vote279 views1 answer
Réglage de constantes PHP
CSS
53 votes263 views6 answers
Background color in css
CSS
0 vote284 views1 answer
Css aplying everything
CSS