响应式CSS网格布局，位置：固定

Question

我正在使用CSS网格布局构建一个响应式模板（仍然在学习），感谢你们中的一些人，我已经完成了大部分工作。

• mobile（max-width：767px）

  • 一切都应该出现在自己的行上

• 片剂（最小宽度：768px）

  • nav在第一行
  • 在第二个
  旁边和主要

• 桌面（最小宽度：992像素）

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

• xl desktop（min-width：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/

Answer 1

如果我理解你的意图，你并没有真正使用标题作为间距，你真的用它来使蓝色背景覆盖所有空间。

由于您似乎也希望徽标和登录与边界垂直对齐，我认为没有任何可行的解决方案来执行此操作。

因此，我能找到的唯一解决方案是使用伪元素。至少这更具语义性。我摆脱了媒体查询，因为现在他们没有在这里发挥作用：

* {
  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>

Answer 2

我想，这就是你想要的东西。我在grid-column: 1 / 8;中使用了@media (min-width: 992px)，并在两侧添加了手动填充。我希望，如果没有这个解决方案，到现在为止，如果不使用额外的<div>，<header>或任何其他容器，您将无法获得更多选项。

＆＃13;

＆＃13;

* {
  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;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

从我所看到的情况来看，您可能需要添加一条规则，说明它是display: block;才能添加position: fixed规则，因为我非常确定<header>是内联元素

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

希望这有效