媒体查询不适用于 css 网格布局

Question

这是我的 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>

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

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

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

~~网格模板区域： "header" "section" "aside-1" "aside-2" "footer";~~

Answer 1

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

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

Answer 2

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

媒体查询不适用于 css 网格布局

Media query is not working with css grid layout

css

media-queries

css-grid