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

11 votes83 views1 answer
90deg rotate to left css
CSS
54 votes122 views2 answers
How to center an image element inside a block in css
CSS
16 votes129 views2 answers
Css hiddden
CSS
0 vote134 views2 answers
Animate.css not working
CSS
2 votes164 views1 answer
Are you sure you want to delete html
CSS
0 vote131 views1 answer
Navbar bootstrap display items horizontally
CSS
28 votes141 views3 answers
Box shadow to make border bottom
CSS
14 votes121 views5 answers
Make background image full width
CSS
3 votes124 views3 answers
Change br height
CSS
1 vote140 views1 answer
Page icon css
CSS