Question

我试图使2个项目（box1和box2）在小屏幕上响应，但是我似乎无法弄清楚。请帮忙。谢谢！

<html lang="en">
<head>
    <style>
      body{
          background: lightblue;
        }
      .container{
          padding:10px;
          display: grid;
          background: lightyellow;
          width:100%;
          grid-gap:5px;
          justify-content:center;
          grid-auto-flow: column;
          grid-auto-columns: 300px 100px;
        }
      .box1{
          background: lightgray;
          min-height:150px;
        }
      .box2{
          background: lightgreen;
          min-height:150px;
        }
    </style>
</head>
<body>
    <div class="container">
      <div class="box box1">BOX 1</div>
      <div class="box box2">BOX 2</div>
    </div>
</body>
</html>

Answer 1

您已告知列为固定宽度 ...，因此它们自然无响应。

使用百分比或小数代替。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

body {
  background: lightblue;
}

.container {
  padding: 10px;
  display: grid;
  background: lightyellow;
  width: 100%;
  grid-gap: 5px;
  justify-content: center;
  grid-auto-flow: column;
  grid-auto-columns: 3fr 1fr;
}

.box1 {
  background: lightgray;
  min-height: 150px;
}

.box2 {
  background: lightgreen;
  min-height: 150px;
}

<div class="container">
  <div class="box box1">BOX 1</div>
  <div class="box box2">BOX 2</div>
</div>

Answer 2

          grid-auto-columns: 300px 100px;

在上面那一行中的

使用绝对尺寸。如果要让它们响应，请使用％而不是px。像

              grid-auto-columns: 30% 10%;

Answer 3

每当您使用固定的像素宽度时，您的元素就会保持该大小，并且不会响应。

对此的快速简便的解决方案是切换到百分比宽度，该百分比宽度指示元素是其容器大小的一部分。假设容器本身是响应的，那么这将使您的元素根据屏幕的宽度更改大小。您需要通过CSS一直执行此操作，因为元素树后面的任何固定大小都可能阻止内部的所有内容响应。

但是，幼稚的百分比数字通常不是一个完美的解决方案，因为在较小的屏幕尺寸下，以相同的比例看情况看起来可能并不正确。例如，三栏式布局可能会缩小，但在小巧的手机屏幕上看起来会非常紧缩。

有很多解决方案，确切的答案取决于您的页面设计和偏好。

首先，考虑使用min-width和max-width使用像素大小来限制元素的大小。如果百分比数值导致它们超过或低于您指定的最大或最小宽度，则这些CSS值将覆盖百分比。这有助于防止物体在仍然在所需范围内适当响应的情况下被过度挤压或伸展开。

接下来，您需要了解媒体查询。这是一项CSS功能，可让您指定仅在浏览器大小在指定范围内时才应用的CSS。（媒体查询的作用远不止此，但我将留给您进一步调查）

下面的示例可能会有所帮助：

@media(max-width:600px) {
    .container {
        grid-auto-flow: unset;
        grid-auto-columns: unset;
    }
}

如果浏览器宽度为600像素或更小，则上面的示例使用媒体查询关闭列。对于狭窄的浏览器，基于列的布局可能不合适，因此，以低分辨率切换到它通常是一个好主意。

CSS网格-如何使项目具有响应性

3 个答案: