CODEWITHSUNDEEP
css
sansSpoon
sansSpoon

Reputation: 2185

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>

Upvotes: 1

Views: 1079

Answers (2)

Telpe
Telpe

Reputation: 29

short answer: media queries have a parent with font-size outside of document, before html tag. You should use px in media queries. Pixels are what you are comparing against.

em is scaled by inheritance and rem only scales by first font-size definition.

So to clarify w3.org description in above linked article about mediaqueries units. rem is directly releative to the initial value of font-size. em is relative to its parent font-size.

if you change font-size in html in px rem will be affected. To avoid em being affected you change font-size in body in px, or maybe other static value.

This may be opinionated. Since rem accept font-size on html as root font-size, media queries should do the same. media em should scale directly from body or even better, if head can contain a font-size since the css files and meta viewport are children of head.

Upvotes: 0

sansSpoon
sansSpoon

Reputation: 2185

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

Upvotes: 1

Related Questions