css - 通过一个简单的例子理解媒体查询

Question

我认为媒体查询真的非常简单。 Codepen of the problem

CSS

.outer{
  background-color: blue;
  width: 1500px;
}

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

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

HTML

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

所以我想要的是红色方 block 周围的蓝色方 block 始终可见。现在我开始将窗口大小从 400 缓慢向上拖动到 750。它的行为完全不像我预期的那样。

带有 flipcardscontainer 类的正方形，从 css 来看，总是小于设备屏幕宽度，也就是浏览器宽度，对吧？

唯一有效的查询是@media only screen and (max-width : 405px)

为什么结果不如预期？

Answer 1

1.) 我想你忘记了 422 上的“px”。
2.) 您没有在宽度 405px 和 422px 之间工作的媒体查询。
3.) 重新安排你的断点，将带有 (min-width: 622px) 的断点放在 下面 因为断点处的 css 规则 (min-width : 422px ) 在视口(viewport)宽度 >622px 时覆盖它。

这样做会给你 THIS