Question

我面临的情况是，对于我的一个类，@ media查询只是没有被读取，相反，即使@media标准正在被读取，也没有读取类@media查询的情况满足。

这是代码：

@media (min-width: 768px){
    .buttonClass{
        position: absolute;
        width: 25%;
    }
}

并且该类未包含在@media中：

.buttonClass{
            position: absolute;
            width: 50%;
        }

我知道我可以通过为具有适当分辨率的类指定@media查询来解决此问题，但我只是想知道为什么没有读取宽度大于768px的屏幕尺寸的@media查询。 / p>

在另一种情况下，我有两个修改body和head标签的类，其中一个包装在@media（宽度为768px或更高），另一个没有包裹任何东西。所以基本上它与上面的完全一样，期望它涉及头部/身体标签。这似乎按预期工作，这让我感到困惑。

面对这种情况我该怎么办？

任何帮助都会非常感激。

Answer 1

@media screen and (min-width: 768px) {
    .buttonClass{
        position: absolute;
        width: 25%;
    }
}

仅在视口为768px 宽或宽时执行，因此即使视口为2000px，此代码仍会执行。

如果您更改了查询：

@media screen and (max-width: 1000px) and (min-width: 768px)

当浏览器的宽度介于768到1000px之间时，会出现这种情况。

你在想相反的事吗？

如果没有满足@media条件，那么没有@media的css执行：

.buttonClass{
    position: absolute;
    width: 25%;
}

顺便说一句，我不知道它是否只是我，但很难理解你的逻辑......主要是

但我只是想知道为什么@media查询屏幕尺寸即使屏幕尺寸很大，也会读取大于768px的宽度大。

这不应该发生吗？

Answer 2

我可以想到两个可能的原因：

1。）引用CSS文件时错误的文件路径 - 但这只适用于使用多个CSS文件，或者一个文件和另一个CSS样式的文件。标记在HTML页面的标题中。

2。）两个规则的相反顺序：媒体查询规则必须在一般规则之后读取，否则一般规则将覆盖MQ规则，因为它适用于所有规则。因此，如果它们都在同一个文件中，那么MQ必须低于一般规则，如果它们在两个特定引用的文件中，那么带有MQ的文件必须在之后引用 / em>具有一般规则的那个。