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

20 votes227 views2 answers
Bootstrap screen sizes
CSS
2 votes247 views1 answer
How to set font max width in css
CSS
1 vote246 views1 answer
Css font-variant
CSS
1 vote219 views1 answer
Css > symbol
CSS
0 vote226 views2 answers
Vscode remote Error: EACCES: permission denied
CSS
-1 vote248 views1 answer
Css comando para poner una imagen como fondo en html
CSS
0 vote239 views1 answer
Apply image as full screen responsive background
CSS
1 vote226 views1 answer
Css spread children horizontally
CSS
0 vote220 views1 answer
Absolute vertical middle quasar
CSS
0 vote248 views1 answer
The basic - and minimal - structure of an email template looks like this:
CSS