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 vote351 views1 answer
Soup css selector
CSS
-1 vote382 views3 answers
Scss
CSS
9 votes550 views3 answers
Console.log style css
CSS
4 votes374 views1 answer
Make border to div
CSS
0 vote362 views2 answers
Pesudo content css break word
CSS
0 vote391 views1 answer
Css float placeholder
CSS
0 vote397 views5 answers
How many px is iphone 12 pro max css
CSS
0 vote379 views1 answer
Scss if
CSS
0 vote408 views1 answer
How to set color of instagram css
CSS
4 votes452 views2 answers
Increase the size of an image on hover using css
CSS