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 vote336 views1 answer
Hiden file upload button css
CSS
17 votes312 views3 answers
How to set div background image
CSS
0 vote278 views1 answer
Flask sqlalchemy array column
CSS
0 vote327 views1 answer
Css letter spacing tight
CSS
0 vote304 views1 answer
Ionic slidesperview not working
CSS
0 vote332 views1 answer
Input type password css
CSS
1 vote369 views2 answers
Block elements css
CSS
0 vote281 views1 answer
Whitesmoke color gradient
CSS
36 votes295 views4 answers
Text color as gradient css
CSS
17 votes279 views2 answers
Place item center in css using grid
CSS