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

8 votes266 views3 answers
Bootstrap 4 center image
CSS
1 vote329 views1 answer
Materialize button
CSS Materialize
0 vote272 views1 answer
Chrome remove black inline from click button
CSS
0 vote302 views1 answer
Css border up and down
CSS
0 vote279 views2 answers
Add custom taxonomy into permalinks post_type_link
CSS
0 vote363 views1 answer
Checkbox change background color bootstrap
CSS Bootstrap
1 vote249 views1 answer
Css media queries between two sizes
CSS
17 votes283 views2 answers
Center div vertically with flexbox
CSS
8 votes266 views5 answers
Css multicolor background
CSS
1 vote272 views1 answer
Html css landing page
CSS