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

-1 vote137 views1 answer
Critical css
CSS
0 vote175 views1 answer
Images css in react native fir in container
CSS
0 vote145 views1 answer
Shadow on hover class on card bootstrap
CSS Bootstrap
-2 votes106 views1 answer
Django won't load static css
CSS
0 vote109 views1 answer
Button active css
CSS
4 votes104 views2 answers
Alternate table row color css
CSS
2 votes109 views2 answers
How to center a inline block element
CSS
61 votes108 views5 answers
Css paragraph ellipsis
CSS
4 votes106 views2 answers
Laravel enum column
CSS
3 votes121 views3 answers
Warning: Failed child context type: Invalid child context `virtualizedCell.cellKey` of type `number` supplied to `CellRenderer`, expected `string`.
CSS