CSS 断点和 em 单位

Question

当我尝试将 em 单位用于媒体查询时，我注意到该单位基于浏览器的默认字体大小，而不是 html 根。
当断点为 min-width: 20em 时，当我要为元素宽度设置 20em 时，它工作起来很奇怪。本例中的两个单位不相等，因为元素的 20em 基于 html font-size 并且媒体查询基于默认浏览器字体大小。

有没有一种方法可以使用 em 单元实现相同的大小，而无需为断点 (@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>

Answer 1

这很有可能 -- 您要查找的是 rem 而不是 em:

@size: 20rem;

rem 是相对于 root 元素的，而 em 是相对于当前元素的。有关这方面的更多信息，请参阅 W3 and TutsPlus。

希望对您有所帮助！ :)

Answer 2

我在问你这个问题后不久就问了这个问题。我终于找到了 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’.

无论您在 html 中设置什么，媒体查询都将始终设置在 浏览器初始字体大小 属性上。

CSS 断点和 em 单位

CSS Breakpoints and em unit

css

breakpoints

font-size

media-queries