@media min-width 没有覆盖普通的 CSS？答案

【问题标题】：@media min-width is not overriding normal CSS?@media min-width 没有覆盖普通的 CSS？
【发布时间】：2021-07-17 13:38:15
【问题描述】：

我的最小宽度没有覆盖我的正常 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;
          }
        }
      }
    }
  }
}

【问题讨论】：

标签： css sass media-queries

【解决方案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 进行可视化 - sn-ps 目前不支持 SCSS（如果我错了请有人编辑此内容）。

【讨论】：