CSS 断点和 em 单元答案

【问题标题】：CSS Breakpoints and em unitCSS 断点和 em 单元
【发布时间】：2017-06-17 09:16:48
【问题描述】：

当我尝试将 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;
  }
}

&lt;div class="box"&gt;&lt;/div&gt;

【问题讨论】：

标签： css media-queries breakpoints font-size

【解决方案1】：

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

@size: 20rem;

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

希望这会有所帮助！ :)

【讨论】：

我刚刚检查过，rem 在这种情况下与em 的工作方式相同。 codepen.io/anon/pen/ygvGdK BTW 我知道rem 和em 之间的区别。
我不明白为什么我不能使用一个变量同时定义断点和元素以及为什么断点单元基于浏览器的设置。
因为在您提供的示例中，父级本身是<html> - 直接父级和根是相同的元素，因此em 和rem 的工作方式相同（基于 13px) :)
我创建了一个（稍作修改的）小提琴来帮助演示这一点，方法是添加一个容器，并为 <html> 和 .container 提供不同的字体大小 -- codepen.io/Obsidian-Age/pen/apYByg
我的目标是对所有（元素和断点）使用em/rem。您的版本将断点设置为px。当我设置html font-size: 13px 并使用断点min-width: 23.077em 时，它将不等于 300px (23.077 x 13) 而是 369px (23.077 x 16)。我错了断点总是将默认浏览器的字体大小作为相对值吗？

【解决方案2】：

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

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

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

【讨论】：