媒体查询CSS3不适用于max-width：420px

Question

我想让我的网站响应并且所有尺寸都正常工作，但问题是当屏幕是＆lt; 420px时他们使用媒体查询992px信息，而不是420px为什么？ 问题是所有类在420px中都能正常工作，但在这个类中，它们采用的是992px

@media (max-width: 420px) {
  div.test {
    width: 200px;
  }
}

<div class="container test">
  <img src="img/img.png">
</div>

Answer 1

在您定义max-width:992px媒体查询后，听起来好像在调用max-width:420px媒体查询。请记住，CSS是自上而下编译的，您的逻辑需要适应这一点。相反，请考虑您的媒体查询顺序：

@media (max-width:992px) {
    ...
}

@media (max-width:420px) {
    ...
}

Answer 2

最佳做法是首先构建网站＆＃34;移动版本＆＃34;，这意味着默认值适用于移动版本，然后您可以使用媒体查询覆盖宽度定义。

因此，如果您希望在420px宽度上使用200px，在992px宽度上使用400px，则应该执行以下操作：

.test {
  width: 200px;
}
@media screen and (min-width: 992px) {
  .test {
    width: 400px;
  }
}

始终使用min-width并始终以较小的分辨率开头并使用较大的分辨率覆盖。