如何为此网格布局编写媒体查询答案

【问题标题】：How to write media query for this grid layout如何为此网格布局编写媒体查询
【发布时间】：2021-09-04 11:34:16
【问题描述】：

我想在下面的网格布局上使用媒体查询，以用于移动设备和平板电脑等较小的屏幕，但当我尝试使用它们时它无法正确应用。网格布局页面完整代码可见：jsfiddle

主容器是这样的：

.page {
  display: grid;
  grid-template-rows: 55px calc(100vh - 55px); 
  grid-template-columns: 40vh auto;
  grid-template-areas: "header header" 
                       "nav content";
}

它在个人电脑和笔记本电脑上运行良好，但在较小的屏幕上，尽管使用如下代码：

@media (min-width: 400px) {
  .page {
    grid-template-areas:
      "header"
      "content"
      "nav";
  }

}

我仍然没有得到任何结果。我还尝试将grid-template-columns: 40vh auto;、40vh 减少为10vh，但在平板电脑上，导航菜单仍然挡住了我的视线，我看不到内容。我想在平板电脑屏幕上有一个更小的标题和导航，这样我就可以看到整个页面，在移动屏幕上，我想把导航放在内容下面，并有类似我上面写的媒体查询的东西。有什么建议吗？

【问题讨论】：

标签： html css responsive-design grid-layout

【解决方案1】：

认为您不应该在 grid-template-columns 中使用 auto

试试这个代码可能对你有帮助：

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  justify-content: center;

请务必根据自己的喜好进行更改，并在更小的屏幕上进行更改

【讨论】：

【解决方案2】：

您可以简单地从grid 切换到flex 并在.nav 上重置order 以将其发送到.content 后面：https://jsfiddle.net/wze7u5sn/

@media (max-width: 400px) {/* break point from your question  , reset it to your needs */
  body {
    overflow: initial;
  }

  .page,
  .content .grid-container {
    display: flex;
    flex-direction: column;
  }

  .nav {
    order: 2;
  }

  article {
    height: auto;
  }
}

当你这样做时：

@media (min-width: 400px) {
  .page {
    grid-template-areas:
      "header"
      "content"
      "nav";
  }

}

您忘记将grid-template-columns: 40vh 1fr ; 重置为grid-template-columns:1fr; 以获得单列，grid-template-rows 同上，您也没有重置。

另外，您可能的意思是 (max-width:400px) 过滤低于 401 像素的小屏幕。

【讨论】：