css - @media min-witdth 被浏览器忽略

Question

我有一对 768 宽度的屏幕规则。问题在于，在比这更大的屏幕上，浏览器采用错误的规则，将规则应用于旧屏幕。

@keyframes p1
{
    from{
        bottom:0;display:none;opacity:0;
    }
    50% {
        bottom:15;opacity:0.5;
    }
    to{
        bottom:25%;display:block;opacity:1;
    }
}


@media screen and (max-width: 800px) {
    @keyframes p1
    {
        from{
            bottom:0;display:none;opacity:0;
        }
        50% {
            bottom:10;opacity:0.5;
        }
        to{
            bottom:15%;display:block;opacity:1;
        }
    }
}

在更大的屏幕上，浏览器采用最大宽度规则，忽略默认值。

Answer 1

检查这个问题，这很可能是重复的，它有很多很好的答案。

这可以按预期工作，其中大屏幕以蓝色（默认）显示 div，中将显示绿色，而在较小的屏幕上显示为红色。

注意媒体查询规则顺序。

旁注：还要注意一些“小屏幕”尽管尺寸很小，但可能有很多像素。检查此答案以获取有关设备的更多信息。

div {
  background-color: blue;
  height: 30px;
}

@media screen and (max-width: 1200px) {
  div {
    background-color: green;
  }
}

@media screen and (max-width: 800px) {
  div {
    background-color: red;
  }
}

<div></div>