Question

当我尝试将em个单元用于媒体查询时，我发现该单元基于浏览器的默认字体大小，而不是html根。当断点为20em时，当我要为元素宽度设置min-width: 20em时，它会很奇怪。在这种情况下，两个单位都不相等，因为元素20em基于html font-size，媒体查询基于默认的浏览器字体大小。

对于使用em单位而没有为断点（@bp-size: 16.250em）定义额外的单独变量，是否有办法实现相同的大小？

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

Answer 1

我问你这个问题不久。我终于找到了埋藏在definitive answer深处的html-gods中的Media Queries page。

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

您在html中设置的内容无关紧要，媒体查询将始终设置在浏览器初始字体大小属性上。

Answer 2

这很有可能 - 你要找的是rem而不是em：

@size: 20rem;

rem相对于root元素，而em相对于当前元素。有关这方面的详细信息，请参阅W3和TutsPlus。

希望这有帮助！：）

CSS断点和em单元

2 个答案: