Menu
I'm a little confused and hope someone could explain this behaviour!?
I have the following code:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
html{
font-size: 62.5%; // set the base font-size to 10px
}
body{
background-color: red;
}
@media only screen and ( max-width: 100em ) /* 1000px?? */ {
body{
background-color: green;
}
}
</style>
</head>
<body>
</body>
</html>
I think the background-color of the body should switch from red to green if the viewport is smaller than 1001px. But that doesn't work. The color is changing at 1600px. So it looks like font-size: 62.5% doesn't work!? The question is: why?
395
From the CSS Media Queries Spec
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’.
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
