@media宽度小于1024像素不起作用

Question

我有一个div的flex-box网格。 我想根据屏幕尺寸更改该div的宽度（％）。

我的scss @media：

   @media (max-width: 1023.9px) {
      width: 33.3333%;
    }

    @media (max-width: 768px) {
      width: 50%;
    }

    @media (max-width: 599px) {
      width: 100%;
    }

    @media (min-width: 1024px) {
      width: 25%;
    }

但是当我在Chrome的响应式工具中测试该功能时，我只有这个意思：

大小为500px的情况，不变，

当我将屏幕尺寸更改为1020时，就可以了，max-width: 1023.9px在起作用。 1200正常，min-width: 1024px在工作。但是不到1024-我得到了奇怪的东西。我该怎么办？

为我的网格类生成的css：

.image-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  background-color: #f6f6f6; }
  .image-grid .image-wrapper {
    width: 25%;
    position: relative; }
    .image-grid .image-wrapper::before {
      display: block;
      content: '';
      width: 100%;
      padding-top: 88.23529%; }
    @media (max-width: 1023.9px) {
      .image-grid .image-wrapper {
        width: 33.3333%; } }
    @media (max-width: 768px) {
      .image-grid .image-wrapper {
        width: 50%; } }
    @media (max-width: 599px) {
      .image-grid .image-wrapper {
        width: 100%; } }
    @media (min-width: 1024px) {
      .image-grid .image-wrapper {
        width: 25%; } }

嗯，现在，当我调整浏览器窗口的大小时，它可以正常工作，通常我得到1列具有550px和2列具有700px。问题得到了解答，但是在“自适应”工具中550px和700px仍然无法正常工作。也许我不了解该工具。

终于解决了。问题是完全愚蠢的：我忘记添加meta标签，因此响应式工具无法正常工作。不要忘记那条重要的线。 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 1

CSS中的每个规则都可以将以前的任何规则覆盖到同一选择器。因此，您只需要切换代码即可使其正常工作：

@media (max-width: 1023.9px) {
  width: 33.3333%;
}

// experimental
@media (max-width: 1000px) {
  width: 50%;
}

@media (max-width: 768px) {
  width: 50%;
}

@media (max-width: 599px) {
  width: 100%;
}

//
@media (min-width: 1024px) {
  width: 25%;
}

您的规则相互覆盖的原因是因为它们都具有相同的选择器，并且尽管max-width: 599px是正确和正确的，但后面出现的max-width: 1023.9px也是如此，因此它覆盖了先前的{ width: 100%;媒体查询中的{1}}。

这里还有一个注释：仅对媒体查询使用整数值。世界上没有max-width: 599px甚至.9像素的屏幕。

Answer 2

CSS是Cascade样式表的缩写。

这意味着规则以级联方式匹​​配。如果您的视口宽度在1000到1024之间，则33.3333％是最后一个匹配的视口，它将被应用，并覆盖所有先前的视口。

一旦知道，就可以以适当的方式更改代码。如果您不想重新考虑代码，可以使用!important来防止覆盖。

@media (max-width: 1000px) {
  width: 50% !important;
}

  

警告：使用!important是一种不好的做法，原因是here