Question

如该布局所示，我需要CSS用于响应式DIV网格。

这是我与第一个答案相距甚远的一个很好的起点...

<?php
  $hello = "hello";
  if($hello) { ?>
    <script...
<?php } ?>
<body class="<?php echo $hello; ?>">

但是它没有响应。适应手机屏幕不会塌陷。

Answer 1

要对此进行响应，必须将VIEWPORT添加到元标记中。然后需要将@media（min-width）添加到CSS。

.main-container {
  background: #f4f4f4;
  display: grid;
}

.picture {
  height: 70%;
  width: 90%;
  background: #333;
  margin: 5%;
}

.image {
  height: 0%;
  width: 100%;
}

.text-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 4fr 1fr;
}

.buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}

button {
  display: block;
  width: 90%;
  height: 90%;
  padding: 20px;
}

.message {
  padding: 10px 20px;
}

@media (min-width: 500px) {
 	.main-container {
 		grid-template-columns: 1fr;
 		grid-template-areas: 
 		"picture"
 		"text-container"
 	}
 	
 }

 @media (min-width: 800px) {
 	.main-container {
 		grid-template-columns: 1fr 2fr;
 		grid-template-areas: 
 		"picture text-container"
 	}
 	
 }

<div class="main-container">
  <div class="picture">
    <img class="image" src="#" alt="#">
  </div>
  <div class="text-container">
    <div class="header">
      <h1>Heading</h1>
    </div>
    <div class="buttons">
      <div><button>Button</button></div>
      <div><button>Button</button></div>
      <div><button>Button</button></div>
    </div>
    <div class="message">
      <p>Message</p>
    </div>
    <div class="buttons">
      <div><button>Button</button></div>
      <div><button>Button</button></div>
      <div><button>Button</button></div>
    </div>
  </div>
</div>

为响应式DIV网格制作CSS布局

1 个答案: