1

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>
sansSpoon
  • 2,115
  • 2
  • 24
  • 43
  • I understand that em is used for the containing element and rem is used for the root element. – sansSpoon Apr 11 '17 at 08:06
  • Sorry, but I think break point should not be moved depending on font size. If your font-size is 12px, your computer screen does not get smaller for that. Break point = different device width – Justinas Apr 11 '17 at 08:08

2 Answers2

1

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

sansSpoon
  • 2,115
  • 2
  • 24
  • 43
0

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.

user305874
  • 19
  • 2