Chrome 舍入媒体查询 em 单位是否错误？

Question

我设置了媒体查询断点如下：

@media screen and (max-width:48em){
    /* phone */
}
@media screen and (min-width:48.063em){
    /* tablet*/
}

我从某些 PX 到 EM 计算器中得到了 48.063em 值（有人告诉我出于某种原因使用 em-units，但这不在这个问题范围内），它在 Firefox 中工作正常，但在 chrome 中，它似乎 769px 的浏览器宽度落在这些最大宽度/最小宽度值之间，并且两者都没有应用于页面。我知道这可以通过将最小宽度设置为 48.01em 来解决，不用担心。我在一些教程中也看到了 48.063em。

有人可以确认这是 chrome 中的错误，还是我的逻辑中的错误？

Answer 1

我遇到了这个确切的问题，我认为你的宽度在指定值之间是正确的，因此没有应用任何样式。 我认为解决方案是删除您的手机媒体查询，只将手机样式放在顶层，如下所示：

/* phone styles */

@media screen and (min-width:48.063em){
    /* tablet styles */
}

在这种情况下，您的手机样式将被应用，除非宽度为 48.063em 或以上，在这种情况下，手机样式将被媒体查询中的类似样式覆盖（移动优先设计）。这样，您只有一个截止点。 您可以以同样的方式将其进一步扩展到更大的设备：

@media screen and (min-width:100em){
    /* even larger styles */
}

如果您查看 Foundation 的 CSS，您会看到这种方法，这有助于我弄清楚。为什么原始代码似乎可以在 Chrome 以外的浏览器中运行，我不知道。