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落在这些最大宽度/最小宽度值之间，并且都没有应用于页面。我知道这可以通过将min-width设置为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以外的浏览器中工作，我不知道。

Chrome舍入媒体查询em单元是错误的吗？

1 个答案: