如何使用 em 隔离相邻的媒体查询？

Question

在元素的显着不同外观之间切换时，例如移动菜单和桌面菜单，我通过在查询中设置一个 max-width 比另一个 min-width 小一个像素来隔离它们。

@media screen and (max-width: 767px) {...}
@media screen and (min-width: 768px) {...}

这意味着我不必担心意外行为，因为我忘记重置元素“显示”或“位置”，如果它们足够不同，它可能会使 css 更小。

我怎样才能使用em 做同样的事情？

1em 的差异显然很大，而 .0625em 如果基数为 16 像素则很好，但使用 em 的整个想法是这不是基数的必要条件，并且会在更高处导致无样式的差距字体大小。

定义 max-width: X.999em 或类似的东西也不起作用，因为浏览器会根据其精度和字体大小简单地四舍五入。

由于这必须与 IE8 (+ respond.js) 一起使用，所以 calc 不是一个选项，尽管我不确定 calc 是否可以用于查询。

Answer 1

如果可以在媒体查询中使用 calc()，我也没有打结（但我真的认为不可能），但最终......为了 IE8 的复古兼容性，有一些 js polyfills，比如：

• Calc-Polyfill
• Polycalc

无论如何，我发现自己也提到了“16px”值。在这个Website 中，有可能将 em 转换为 px 所以......如果你声明 em 的差异在 0.63 和 1.125 之间，你将在 '1px' 区间内