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 vote206 views1 answer
Keynote Smooth the appearance of animations within a presentation:
CSS
34 votes232 views1 answer
Css middle and center align div
CSS
65 votes235 views3 answers
Css variables
CSS
0 vote202 views1 answer
Css fixed bottom
CSS
0 vote208 views1 answer
Change height primeng progress spinner
CSS
0 vote246 views2 answers
Not clickable css
CSS
0 vote207 views2 answers
Html css change reading direction
CSS
0 vote217 views3 answers
Constraint in grails
CSS
0 vote205 views1 answer
Ubuntu phantomjs wrong paper size
CSS
0 vote194 views1 answer
Jquery change css variiable value
CSS