CSS 断点和 em 单元

Question

当我尝试在em媒体查询中使用单位时，我注意到单位基于浏览器的默认字体大小，而不是html根。
它工作时，奇我会集到20em的元素宽度时断点min-width: 20em。在这种情况下，两个单位并不相等，因为元素的20em基于html font-size浏览器的默认字体大小而媒体查询基于默认的浏览器字体大小。

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

在你问这个问题后不久我问了这个问题。我终于从埋藏在媒体查询页面深处的 html-gods 中找到了明确的答案。

媒体查询中的相对单位基于初始值，这意味着单位从不基于声明的结果。例如，在 HTML 中，'em' 单位相对于 'font-size' 的初始值。

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