Question

我是CSS的新手，一直在探索w3schools，并使用其示例代码。我试图通过调整媒体查询中的grid-area来使网格响应，但是当我将视口的大小最大设置为600 + px时，它没有任何作用。我想念什么？

这里是链接：https://www.w3schools.com/code/tryit.asp?filename=G87J3CAFWM69

编辑：这是没有链接的代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.header { grid-area: header; }
.menu { grid-area: menu; }
.main { grid-area: main; }
.right { grid-area: right; }
.footer { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header' 'menu' 'main' 'right' 'footer';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  display: flex;
  background-color: rgba(255, 255, 255, 0.8);
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  font-size: 30px;
}

@media only screen and (min-width: 600px) {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}
</style>
</head>
<body>

<h1>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to name grid items.</p>

<p>You can refer to the name when you set up the grid layout, by using the <em>grid-template-areas</em> property on the grid container.</p>

<p>This grid layout contains six columns and three rows:</p>

<div class="grid-container">
  <div class="header">Header</div>
  <div class="menu">Menu</div>
  <div class="main">Main</div>  
  <div class="right">Right</div>
  <div class="footer">Footer</div>
</div>

Answer 1

您的CSS没有任何类，您正在调用的类grid-template-areas不存在。

自适应CSS应该如下所示：

@media (max-width: 600px) { .grid-container: width:400px; } }

CSS基本上说，在所有像素最大为600px的屏幕上，因此，所有像素小于600px的屏幕都会将名为.grid-container的类渲染为400px宽。

使用网格区域的响应式网格的媒体查询

1 个答案: