Css 用一个简单的例子理解媒体查询

我觉得媒体查询真的很容易。

css

HTML

所以我想要的是，红场周围的蓝色正方形总是可见的。现在我开始将窗口大小从400缓慢向上拖动到750。它一点也不像我想象的那样

flipcardscontainer类的正方形在css中始终小于设备屏幕宽度，即浏览器宽度，对吗

唯一有效的查询是

@仅媒体屏幕和（最大宽度：405px）

为什么结果不如预期？

您有两个使用相同条件的媒体查询

对于其中一个媒体查询，请插入最大宽度，然后重试。它会起作用的

您还忘记了第二种情况下的px

@media only screen and (min-width : 622px) {
    .flipcardscontainer{
        width: 506px !important;
    }
}


@media only screen and (min-width : 422px) and (max-width: 621px) {
    .flipcardscontainer{
        width: 306px !important;
    }
}

@media only screen and (max-width : 405px) {
    .flipcardscontainer{
        width: 206px !important;

    }
}

1）我想你忘了422上的“px”
2.）您没有在405px和422px宽度之间工作的媒体查询
3.）重新排列断点，将带有

（最小宽度：622px）

的断点放在其他断点的下方，因为当视口宽度>622px时，css规则将覆盖断点

（最小宽度：422px）

---

这样做会给你

我想你忘了422上的“px”。。并且您没有一个在405px和422px宽度之间工作的媒体查询；试着重新排列你的媒体查询，把（最小宽度：622px）放在其他的下面。好的事情是这就像css一样工作。因此，如果较新的定义（较低的定义）获胜，您实际上不必具有排他性。也就是说，最好实现递减最大宽度定义或递增最小宽度定义。你也有一个输入错误，你忘记了422定义中的px是的，你的代码笔有422定义的输入错误。这就是为什么它没有work@Toskan添加了演示链接。您可以在jsbin+1中查看，您的非常好，谢谢。我只是觉得使用级联方式比排除要好。那+他找到的丢失的px，所以我接受了另一个帖子。

<div class="outer">
  <div class="flipcardscontainer"> 
  </div>
</div>

@media only screen and (min-width : 622px) {
    .flipcardscontainer{
        width: 506px !important;
    }
}


@media only screen and (min-width : 422px) and (max-width: 621px) {
    .flipcardscontainer{
        width: 306px !important;
    }
}

@media only screen and (max-width : 405px) {
    .flipcardscontainer{
        width: 206px !important;

    }
}