css 介质查询未覆盖网格-模板-列

gijlo24d 于 2023-02-17 发布在其他

关注(0)|答案(1)|浏览(132)

我有一个在主css中显示为网格的表单元素

.mainDiv {
    .displayNone {
      display: none;
    }

    .generalInfoSection {
      .generalInfoTitle {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 600;
        font-size: 20px;
        line-height: 30px;
        color: #23282d;
        text-align: left;
      }

      .generalInfoFormSection {
        .generalInfoForm {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: auto auto auto 150px;
          grid-column-gap: 17px;
          grid-row-gap: 25px;
          margin-top: 16px;

这是我的媒体查询

@media (max-width: 768px) {
    .mainDiv {
      .displayNone {
        display: none;
      }

      .generalInfoSection {
        .generalInfoTitle {
          font-family: Montserrat;
          font-style: normal;
          font-weight: 600;
          font-size: 20px;
          line-height: 30px;
          color: #23282d;
          text-align: left;
        }

        .generalInfoFormSection {
          .generalInfoForm {
            grid-template-columns: 1fr 1fr;
            /* grid-template-rows: unset; */
            grid-column-gap: 17px;
            grid-row-gap: 25px;
            margin-top: 16px;

每当我试图覆盖grid-template-columns时，为了使它只有2列，它保持在3列网格。我检查了检查器，样式正在应用，但输出仍然是3列而不是2列。这是使用react with styled-components。

css

来源：https://stackoverflow.com/questions/69168024/media-query-not-overwriting-grid-template-column

1条答案

按热度按时间

uurv41yg1#

如果你在获取媒体查询覆盖CSS中的grid-template-columns属性时遇到问题，可能有几个原因。下面是一些需要检查的事项：
1.专属性：请确保媒体查询的特定性等于或大于原始grid-template-columns属性。例如，如果原始CSS规则如下所示：

.my-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

然后，您的媒体查询应类似于以下内容：

@media screen and (max-width: 768px) {
  .my-grid {
    grid-template-columns: 1fr;
  }
}

请注意，介质查询与原始规则具有相同的选择器，因此特异性相同。如果要增加介质查询的特异性，可以添加父选择器，如下所示：

@media screen and (max-width: 768px) {
  .my-parent .my-grid {
    grid-template-columns: 1fr;
  }
}

1.缺少视口元标记：请确保您的HTML文档具有viewport meta标记，以确保浏览器在不同设备上正确呈现页面。如果没有此标记，媒体查询可能无法按预期工作。以下是viewport meta标记的示例：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

赞(0）回复(0）举报 2023-02-17

我来回答

css 介质查询未覆盖网格-模板-列

1条答案

相关问题

热门标签

最新问答