html - 为什么有些@media 没有被阅读而不是非@media 对应物？

Question

我面临的情况是，对于我的一个类(class)，@media 查询只是没有被读取，相反，即使 @media 标准正在被读取，类也没有围绕 @media 查询被读取的情况遇见了。

这是代码:

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

并且没有包含在@media 中的类:

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

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

在另一种情况下，我有 2 个修改 body 和 head 标签的类，其中一个包裹在 @media(宽度 768px 或更大)中，另一个没有包裹任何东西。所以基本上它和上面的完全一样，除了它涉及 head/body 标签。这似乎按预期工作，这让我感到困惑。

遇到这种情况我该怎么办？

任何帮助将不胜感激。

Answer 1

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

仅当视口(viewport)为 768px 宽或更宽时执行，因此即使视口(viewport)为 2000px，此代码仍会执行。

如果您更改查询:

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

当浏览器的宽度在 768 到 1000 像素之间时执行。

你的想法正好相反吗？

当@media 条件都不满足时，没有@media 的css 执行:

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

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

but I just wanted to know why the @media query for screen sizes with widths larger than 768px was being read even though the screen size is larger.

这不是应该发生的吗？