媒体查询不适用于 CSS 网格布局 [关闭]答案

【问题标题】：Media query is not working with css grid layout [closed]媒体查询不适用于 CSS 网格布局 [关闭]
【发布时间】：2021-01-05 08:25:06
【问题描述】：

这是我的 HTML 和 CSS 文件

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-areas:
    "header"
    "section"
    "aside-1"
    "aside-2"
    "footer";
}

@media screen and (min-width: 700px) {
    .container {
        grid-template-areas:
      "header header header"
      "aside-1 section aside-2"
      "footer footer footer";
    }
}

/* All Grid Items */
.container > * {
    background-color: mediumseagreen;
    font-size: 80px;
}

header {
    grid-area: header;
}

aside:nth-of-type(1) {
    grid-area: aside-1;
}

section {
    grid-area: section;
}

aside:nth-of-type(2) {
    grid-area: aside-2;
}

footer {
    grid-area: footer;
}

<div class="container">
    <header>Header</header>
    <aside>Aside 1</aside>
    <section>Section</section>
    <aside>Aside 2</aside>
    <footer>Footer</footer>
</div>

根据屏幕尺寸 700 像素应用的媒体查询，这将是两种不同的布局。但是，它只显示所有不同屏幕尺寸的单一布局。

grid-template-areas:
  "header header header"
  "aside-1 section aside-2"
  "footer footer footer"

另一个布局在 700 像素以下工作，如果我检查控制台，它会显示所有尺寸的屏幕：

~~网格模板区域： “标题” “部分” “旁白-1” “旁白2” “页脚”；~~

【问题讨论】：

这里似乎工作正常

标签： css media-queries css-grid

【解决方案1】：

代码很好，可以正常使用create-react-app，也许热重新加载是一个解决方案。

【讨论】：

【解决方案2】：

如果您的媒体查询不起作用，则将此元标记添加到 HTML 的头部标记中。

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

【讨论】：