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

47 votes153 views6 answers
Text-overflow ellipsis css
CSS
1 vote276 views1 answer
Css light grey
CSS
1 vote175 views1 answer
Css scrollbar always visible
CSS
0 vote154 views1 answer
Css3 background image curve
CSS
0 vote165 views1 answer
Using to in linear gradient css
CSS
1 vote163 views1 answer
Css how to hyperlink
CSS
0 vote134 views1 answer
Advanced custom fields cpt options pages
CSS
0 vote170 views2 answers
Wpforms button style
CSS
0 vote155 views1 answer
Class html css
CSS
0 vote180 views2 answers
How to convert directory SASS/SCSS to CSS via command line?
CSS