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

15 votes185 views2 answers
Get rid of arrows number input
CSS
38 votes188 views6 answers
Gradient text color css
CSS
0 vote206 views1 answer
Prevent mailto href indexing
CSS
0 vote215 views1 answer
Input checkbox size css
CSS
1 vote275 views1 answer
Css spread children horizontally
CSS
16 votes263 views2 answers
Css hiddden
CSS
1 vote195 views2 answers
Css disabled option
CSS
1 vote216 views1 answer
Alert without page refresh
CSS
0 vote203 views1 answer
How to install tailwind cdn
CSS
0 vote207 views1 answer
Hide first of type elements using css , how to hide elements using css
CSS