是chrome整理媒体查询em单元错了吗？ [英] Is Chrome rounding media query em units wrong?

问题描述

我已经设置了媒体查询断点，如下所示：

I have set up media query break points as follows:

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

我从一些PX到EM计算器获得了48.063em的值（由于某种原因被告知使用em单位，这是在这个问题之外），它是在firefox的工作确定，但在chrome，似乎浏览器的宽度769px落在这些max-width / min-width值之间，并没有应用于页面。我知道这可以通过设置min-width到48.01em，不用担心。我已经看过48.063em在一些教程中也使用。

I got the 48.063em value from some PX to EM calculator (I was told to use em-units for some reason, but that is outside of this question), and it is working ok in firefox, but in chrome, it seems that browser width of 769px falls BETWEEN those max-width / min-width values, and neither is applied to the page. I know this can be fixed by setting that min-width to 48.01em, don't worry about that. I have seen 48.063em used in some tutorials also.

有人可以确认这是一个错误在chrome或我的逻辑错误吗？

Can someone confirm if this is a bug in chrome, or an error in my logic?

推荐答案

我有这个确切的问题，我想你是正确的，你的宽度落在指定的值之间，因此不应用样式。
我认为解决方案是删除您的电话媒体查询，只有在顶层的电话样式，如此：

I've had this exact problem and I think you are correct that your width is falling between the specified values and therefore neither style is applied. I think the solution is to remove your phone media query and just have the phone styles at the top level, like so:

/* phone styles */

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

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

In this case your phone styles will be applied unless the width is 48.063em or above, in which case the phone styles will be overridden by similar ones in the media query (mobile first design). This way you only have a single cut-off point. You could further extend this to larger devices in the same way:

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

看看基金会的CSS，您会看到这种方法，这是什么帮助我计算出来。为什么原始代码似乎适用于Chrome以外的浏览器，我不知道。

If you look at the CSS for Foundation you will see this approach, which is what helped me figure it out. Why the original code seems to work in browsers other than Chrome, I do not know.

这篇关于是chrome整理媒体查询em单元错了吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！