@media min-width 没有覆盖正常 CSS？

Question

我的最小宽度没有覆盖我的正常 CSS？我以前没有遇到过这个问题，但我似乎无法让它工作。使用 "!important" 也无济于事。

这是我的代码 -

.slant-container {
  .test-container {
    .services-content {
      -webkit-box-align: center;
      align-items: center;
      text-align: left;
      justify-content: space-around;
      display: -webkit-box;
      display: flex;
      flex-wrap: wrap;

      .left-hero {
        width: 100%;

        .hero-p {
          width: 100%;
        }
      }
    }
  }
}

@media screen and (min-width: 841px) {
  .slant-container {
    .test-container {
      .services-content {
        .left-hero {
          width: 50%;

          .hero-p {
            padding-bottom: 3rem;
          }
        }
      }
    }
  }
}

Answer 1

您可以移除方框显示，只设置父容器的伸缩方向 .services-content，如下所示：

.slant-container {
  .test-container {
    .services-content {
      align-items: center;
      text-align: left;
      justify-content: space-around;
      display: flex;
      flex-direction: column;

      .left-hero {
        width: 100%;

        .hero-p {
          width: 100%;
        }
      }
    }
  }
}

@media screen and (min-width: 841px) {
  .slant-container {
    .test-container {
      .services-content {
        flex-direction: row;
        
        .left-hero {
          width: 50%;

          .hero-p {
            padding-bottom: 3rem;
          }
        }
      }
    }
  }
}

这样就达到了大致相同的效果。要居中对齐元素并在 .left-hero 元素的较小屏幕尺寸上实现盒装效果，您可以执行以下操作：

.left-hero {
  ...
  .hero-p {
    margin: 0 auto;
    width: 90%;
  }
}

查看 this Codepen 进行可视化 - 片段目前不支持 SCSS（如果我错了，请有人编辑）。

@media min-width 没有覆盖正常 CSS？

@media min-width is not overriding normal CSS?

css

sass

media-queries