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

10 votes352 views5 answers
Text-align property in css
CSS
9 votes353 views1 answer
Perfect full page background image
CSS
1 vote361 views1 answer
Add image to div in css
CSS
8 votes379 views3 answers
Css change font awesome icon color
CSS
0 vote356 views1 answer
Css id with mask wildcard
CSS
4 votes381 views1 answer
How to get an angled section end css
CSS
0 vote329 views1 answer
Css overflow smooth scroll mobile
CSS
3 votes344 views1 answer
Css image fit in div with aspect ratio
CSS
0 vote316 views1 answer
All pseudo elements css
CSS
0 vote363 views1 answer
Css scroll height if screen too small
CSS