Search code examples
cssmedia-queriesbreakpointsfont-size

CSS Breakpoints and em unit

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>

Solution

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