CSS Breakpoints and em unit

Question

When I tried to use em units with media queries I noticed that the unit is based on browser's default font size, not on the html root.
It working odd when I'm gonna to set 20em for element width when breakpoint is min-width: 20em. Both units in this case ar not equal because the element's 20em is based on the html font-size and media query is based on the default browser font size.

Is there a way to achieve the same size for both using em unit without defining additional, separate variable only for breakpoints (@bp-size: 16.250em)?

html {
  font-size: 0.813em;  // 13px (assume default browser font-size: 16px)
}

.box {
  width: 1em;          // 13px x 13px
  height: 1em;
  background-color: #000;
  

  // Problem
  
  @size: 20em; 

  @media screen and (min-width: @size) {     // 320px (20 x 16px) why not 260px?
    width: @size;                            // 260px (20 x 13px)
    background-color: #f00;
  }
}

<div class="box"></div>

score 6 · Accepted Answer · answered Aug 09 '17 at 12:02

I asked this question not long after yours. I finally found the definitive answer from the html-gods buried deep in the Media Queries page.

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

It doesn't matter what you set in your html, media queries will always be set on the browsers initial font-size attribute.

score 1 · Answer 2 · answered Jan 31 '17 at 19:43

1

This is very possible -- What you're looking for is rem rather than em:

@size: 20rem;

rem is relative to the root element, whereas em is relative to the current element. See W3 and TutsPlus for further information in this regard.

Hope this helps! :)

answered Jan 31 '17 at 19:43

Obsidian Age

41,205
10
48
71

I just checked and `rem` works in the same way as `em` in this case. http://codepen.io/anon/pen/ygvGdK BTW I know differences between `rem` and `em`. – rflw Feb 01 '17 at 19:28
I don't understand why I it's not possible to use one variable to define both breakpoint and element simultaneously and why breakpoints units based on browser's settings. – rflw Feb 01 '17 at 19:37
Because in your example provided, the parent is `` itself -- both the direct parent and the root are the same element, so both `em` and `rem` will work the same way (based on 13px) :) – Obsidian Age Feb 01 '17 at 19:49
I've created a (slightly modified) fiddle helping to demonstrate this, by adding a container, and giving `` and `.container` a different font-size -- http://codepen.io/Obsidian-Age/pen/apYByg – Obsidian Age Feb 01 '17 at 19:52
My goal is to use `em`/`rem` for all (elements and breakpoints). Your version has breakpoints set as `px`. When I set `html font-size: 13px` and I'll use a breakpoint `min-width: 23.077em` then it won't be equal to 300px (23.077 x 13) but 369px (23.077 x 16). Am I wrong that breakpoints always get the default browser's font-size as relative? – rflw Feb 01 '17 at 20:14
That's a good question -- I'd **assume** that `@media` is 'relative' to ``, but can't confirm that. Typically you'd want to use a fixed media query `min-width` breakpoint of `px`, as the devices will always have the same width, regardless of their font-sizes. Then you could set `em` widths for any elements that don't display correctly at the specified width. Considering you can define an infinite amount of breakpoints, you shouldn't need a font-size-based 'sliding' `min-width`. You may want to have a look [here](http://stackoverflow.com/a/22262489/2341603) for further information. – Obsidian Age Feb 01 '17 at 22:11

CSS Breakpoints and em unit

2 Answers2