sansSpoon sansSpoon - 11 days ago 7
CSS Question

css em/rem fixed to multiply by 16?

I have the following basic page where I want to set a media break point of 320px, but want the root-font-size to be 14px, which I've set. Why is my break point still being set to 16px x 22.8em = 364.8px and not 14px x 22.8em = 319.2px? I'm getting the same if I change from rem to em.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>#</title>

<style type="text/css">
html {
font-size: 14px;
}

@media (min-width: 22.8rem) {
html {
font-size: 4rem;
}
}
</style>

</head>

<body>
<p>This is some text</p>
</body>
</html>

Answer

https://www.w3.org/TR/css3-mediaqueries/#units

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’.