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>

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

带有flipcardscontainer类的方块，看着css，总是比设备屏幕宽度小，这是浏览器宽度，对吗？

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

为什么结果不如预期？

Answer 1

<强> Working DEMO

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

对于其中一个媒体查询，插入最大宽度并尝试。它会起作用。

您还忘记了第二个条件下的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;

    }
}

Answer 2

1。）我想你忘记了＆＃34; px＆＃34;在422.
2.）您没有在宽度405px和422px之间工作的媒体查询。
3.）重新排列断点，将(min-width: 622px) 低于的断点放在其他断点上，因为当视口宽度> 622px时，断点(min-width : 422px)处的css规则会覆盖它。 / p>

这样做会为您提供 THIS

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

2 个答案: