Question

我正在使用网格，由于某种原因，在媒体查询中使用max-width似乎无济于事。下面的代码：

代码：

body {
  color: #fff;
  text-align: center;
}

#content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 1rem;
  grid-template-areas: 'header header header header' 'block_1 block_1 block_2 block_2'
}

@media only screen and (max-width:700px) {
  #content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 1rem;
    grid-template-areas: 'header' 'block_1' 'block_2'
  }
}

#content>* {
  background-color: #fff;
  border: 1px solid black;
}

.header {
  grid-area: header;
  height: 150px;
}

.block_1 {
  grid-area: block_1;
  height: 150px;
}

.block_2 {
  grid-area: block_2;
  height: 150px;
}

<!doctype html>

<html>

<head>
  <link rel="stylesheet" type="text/css" href="master.css">
</head>

<body>
  <div id='content'>
    <div class='header'>Header</div>
    <div class='block_1'>Header</div>
    <div class='block_2'>Header</div>
  </div>
</body>

</html>

我希望2个块类彼此堆叠在699px及以下。但是，他们似乎不想这样做。

Answer 1

您还需要更改grid-template-columns: repeat(1, 1fr);，以使网格采用全宽。

body {
  color: #fff;
  text-align: center;
}

#content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 1rem;
  grid-template-areas: 'header header header header' 'block_1 block_1 block_2 block_2'
}

@media only screen and (max-width:700px) {
  #content {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 1rem;
    grid-template-areas: 'header' 'block_1' 'block_2'
  }
}

#content>* {
  background-color: #fff;
  border: 1px solid black;
}

.header {
  grid-area: header;
  height: 150px;
}

.block_1 {
  grid-area: block_1;
  height: 150px;
}

.block_2 {
  grid-area: block_2;
  height: 150px;
}

<!doctype html>

<html>

<head>
  <link rel="stylesheet" type="text/css" href="master.css">
</head>

<body>
  <div id='content'>
    <div class='header'>Header</div>
    <div class='block_1'>Header</div>
    <div class='block_2'>Header</div>
  </div>
</body>

</html>

CSS网格媒体查询不响应

1 个答案: