使用 position: fixed 的响应式 CSS 网格布局

Question

我正在使用CSS Grid Layout（还在学习）构建响应式模板，并且多亏了这里的一些人，我已经完成了大部分工作。

• 移动设备 (最大宽度: 767px)

  • 所有内容都应该显示在自己的行上

• 平板电脑 (最小宽度: 768px)

  • 导航栏在第一行
  • 侧边栏和主要内容在第二行

• 台式机 (最小宽度: 992px)

  • 与平板电脑相同，但水平间距为10％

• 超大屏幕电脑 (最小宽度: 1920px)

  • 与台式机相同，但最大宽度为1920px

问题是我正在使用 header 标签来为 nav 左右的间距着色。无论我使用头部标签还是div，似乎都不应该有一个空容器只是为了着色空白区域。 有没有一种方法可以让我将 position: fixed 应用于整个顶部部分？

* {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  font-family: sans-serif;
}

a {
  text-decoration: none;
  color: white;
}

header,
nav {
  background: blue;
  color: #fff;
}

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

nav span {
  margin-right: auto;
}

header {
  display: none;
}

aside {
  background: lightgreen;
}

main {
  background: pink;
}


/* mobile  */

@media (max-width: 767px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  nav,
  aside,
  main {
    grid-column: 1 / 1;
    padding: 0 15px;
  }
}


/* tablets */

@media (min-width: 768px) {
  body {
    grid-template-columns: 275px 1fr;
    grid-template-rows: 1fr 1fr;
  }
  nav {
    grid-column: 1 / 4;
    grid-row: 1;
    height: 50px;
    grid-row: 1;
  }
  aside {
    grid-column: 1;
  }
  main {
    grid-column: 2;
  }
  nav,
  aside,
  main {
    padding: 0 15px;
  }
}


/* desktops */

@media (min-width: 992px) {
  body {
    grid-template-columns: 10% 275px 1fr 10%;
    grid-template-rows: 1fr 1fr;
  }
  header {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
  }
  nav {
    grid-column: 2 / 4;
    grid-row: 1;
  }
  aside {
    grid-column: 2 / 3;
  }
  main {
    grid-column: 3 / 4;
  }
}


/* xl desktops */

@media (min-width: 1920px) {
  body {
    grid-template-columns: 1fr minmax(auto, 300px) minmax(auto, 1620px) 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

<header></header>
<nav>
  <span>Logo</span>
  <a href="#">login</a>
</nav>
<aside>aside</aside>
<main>main</main>

https://jsfiddle.net/90kotz8d/1/

- totalnoob

---

你提出了两个问题：一个关于间距，另一个关于媒体查询。通常最好一次专注于一个问题。 - Michael Benjamin

关于媒体查询，这里有一个常用的断点列表适用于响应式网站：Common breakpoints for media queries on a responsive site。 - Michael Benjamin

我已经编辑了问题，并将为媒体查询创建另一个问题。谢谢。 - totalnoob

你能否发一条评论，解释一下为什么我的之前的回答对你来说不太合适？这样做会更容易帮助你。 - vals

你是想在页面顶部创建间距吗？你为什么要使用一个标签来创建间距而感到困惑呢？ - Jake

Answer 1

如果我理解你的意图正确，那么你实际上并不是在使用头部（header）来设置间距，而是想要让蓝色背景覆盖所有空间。

既然你似乎还希望徽标和登录垂直对齐，我认为在导航栏中没有任何可能的解决方案。

因此，我找到的唯一解决方案涉及使用伪元素。至少这更具语义化。我取消了媒体查询，因为它们现在在这里没有发挥作用。

* {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
    grid-template-columns: 10% 275px 1fr 10%;
    grid-template-rows: 1fr 1fr;
}

.container::after {
    content: "";
    background-color: blue;
    grid-column: 1 / 5;
    grid-row: 1;
    z-index: -1;
}

a {
  text-decoration: none;
  color: white;
}


nav {
  background: blue;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

nav span {
  margin-right: auto;
}

header {
  display: none;
}

aside {
  background: lightgreen;
}

main {
  background: pink;
}
nav {
    grid-column: 2 / 4;
    grid-row: 1;
  }
  aside {
    grid-column: 2 / 3;
  }
  main {
    grid-column: 3 / 4;
  }

<div class="container">
<nav>
  <span>Logo</span>
  <a href="#">login</a>
</nav>
<aside>aside</aside>
<main>main</main>
</div>

- vals

Answer 2

我想这就是您想要的内容。在@media (min-width: 992px)中，我使用了grid-column: 1 / 8;并在两侧添加了手动填充。希望在没有这个解决方案的情况下，您不需要使用额外的<div>、<header>或任何其他容器。

* {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  font-family: sans-serif;
}

a {
  text-decoration: none;
  color: white;
}

header,
nav {
  background: blue;
  color: #fff;
}

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

nav span {
  margin-right: auto;
}

header {
  display: none;
}

aside {
  background: lightgreen;
}

main {
  background: pink;
}

/* mobile  */


@media (max-width: 767px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  
  nav,
  aside,
  main {
    grid-column: 1 / 1;
    padding: 0 15px;
  }
}


/* tablets */


@media (min-width: 768px) {
  body {
    grid-template-columns: 275px 1fr;
    grid-template-rows: 1fr 1fr;
  }
  
  nav {
    grid-column: 1 / 4;
    grid-row: 1;
    height: 50px;
    grid-row: 1;
  }
  
  aside {
    grid-column: 1;
  }
  
  main {
    grid-column: 2;
  }
  
  nav,
  aside,
  main {
    padding: 0 15px;
  }
}


/* desktops */


@media (min-width: 992px) {
  body {
    grid-template-columns: 10% 275px 1fr 10%;
    grid-template-rows: 1fr 1fr;
  }
  
  nav {
    grid-column: 1 / 8;
    grid-row: 1;
    padding-right: 11.3vw;
    padding-left: 11.3vw;
  }
  
  aside {
    grid-column: 2 / 3;
  }
  
  main {
    grid-column: 3 / 4;
  }
}


/* xl desktops */


@media (min-width: 1920px) {
  body {
    grid-template-columns: 1fr minmax(auto, 300px) minmax(auto, 1620px) 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

<nav>
  <span>Logo</span>
  <a href="#">login</a>
</nav>
<aside>aside</aside>
<main>main</main>

- UkFLSUI

Answer 3

据我所见，你可能需要添加一条规则，即在添加position:fixed规则之前，要加上display:block; ，因为我很确定<header>是内联元素。

你还可以尝试添加媒体查询，链接到不同的样式表，使用display:tableRow;、tableCell和table值显示不同的表格。

希望这个方法有效。

- user9945700

---

<header> 是一个块级元素。 - sol