浏览器

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为蓝色（默认），中等显示绿色，小显示为红色。

注意媒体查询规则顺序。

旁注：另外请注意，尽管物理尺寸较小，但某些“小屏幕”可能会有很多像素。有关设备的更多信息，请查看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>

<击>