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 vote320 views1 answer
Margin not working on inline elements
CSS
4 votes319 views3 answers
Trash icon font awesome
CSS
0 vote321 views1 answer
Css widows
CSS
0 vote323 views1 answer
Background pulled to corner on small screens
CSS
-1 vote348 views1 answer
Select box arrow hide css in ie
CSS
0 vote328 views1 answer
Wordpress page css not working
CSS
3 votes333 views3 answers
Font shadow css
CSS
0 vote380 views1 answer
Chai assert
CSS
0 vote306 views1 answer
Ignore default css for react Link
CSS
2 votes325 views1 answer
Transfrom rotate
CSS