@media min-width 被浏览器忽略

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

检查 this question，这很可能是重复的，它有很多很好的答案。

~~这按预期工作，大屏幕显示 div 蓝色（默认），中等屏幕显示绿色，小屏幕显示红色。~~

注意媒体查询规则顺序。

旁注：另请注意，某些 "small screens" 尽管尺寸很小，但可能有很多像素。查看 this answer 以了解有关设备的更多信息。

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>

@media min-width 被浏览器忽略

@media min-witdth is being ignored by browser

css

media

screens