css - em 中的 Bourbon/Neat 媒体查询

Question

我使用 ems 进行了一些媒体查询。使用像素时，您可以执行以下操作:

@media  (max-width: 640px) { ... }
@media (min-width: 641px) and (max-width: 768px) { ... }

当使用 ems 时，这些类型的查询看起来像:

@media  (max-width: 40em) { ... }
@media (min-width: 41em) and (max-width: 48em) { ... }

如您所见，在第一个 em 媒体查询中有 40 em，在第二个媒体查询中有 41 em。如果我们把1em算作16px，就有16px的空隙。我该如何处理？

我可以将 41 em 更改为 40 em，但随后我有两个 40 em 的媒体查询。当在两个媒体查询中使用 neat 与外部容器和 omega mixin 结合使用时，这尤其烦人，并且 omega mixin 的参数不同，例如 2n 和 3n。

问题是，媒体查询将满足 40em 的 2n 和 3n css 规则，这会产生一些奇怪的布局。现在我可以使用 omega reset mixin。但我读到这不是好的做法。

我错过了什么吗？任何人都有一些使用 em 处理断点的好主意。我也可以在媒体查询中只使用 min-with，但我仍然需要 omega reset mixin。

Answer 1

我只会使用最大宽度，因为它们对移动用户更友好。这样最重的覆盖是针对宽屏幕的。

EM 是数字，不一定是实数。也许尝试使用 40em 和 40.1em，或者更小？