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，但之后我有40em的两个媒体查询。在两种媒体查询中使用整齐与外容器和omega mixin结合使用时，尤其令人讨厌，因为omega mixin具有不同的参数，例如2n和3n。

问题是，媒体查询是否满足40em的2n和3n css规则，这给出了一些奇怪的布局。现在我可以使用omega reset mixin。但我读过这不是一个好习惯。

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

Answer 1

我只使用max-widths，因为它们对移动用户更友好。这样，最重的覆盖是用于宽屏幕。

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

Answer 2

目前我只使用min-width而不是max-width和移动第一种方法。感谢您的投入。

Answer 3

试试这个 - ＆gt; em（640）和em（641）