在 Window 大小的特定范围内继续更改 Div 大小

Question

所以当我在一些媒体采石场为我的初学者图片库项目编码时。我注意到每次 window 大小减少 [=15] 时，我需要将包含我的 img 标签的 div 的 width 减少 10px =] 以便在一行中放置 3 张图像。

我想知道有没有一种方法可以与 CSS 交互并设置一种方法来在循环中每次检查它，而不是全部输入。在这种情况下，我不知道如何分享我的尝试。

尽管我已经向 Google 询问了一些答案，而且根据我的理解，我认为使用 CSS 预处理器（例如 SaSS 可能是可行的，但我已经老实说，对JavaScript一无所知。

所以我不知道在这种情况下如何分享我的尝试。我可能不知道正确的语法或找不到它，所以现在对我来说它更像是一个理论问题。

Answer 1

如果我是对的，您想将 3 张图像排成一行，而不必纠正混乱的代码。您可以使用网格来消除任何问题。

您可以通过更改 grid-gap

来扩大间隙大小

.grid-container{
  display: grid;
  grid-template-columns: repeat( 3, minmax(auto, 1fr) );
  grid-gap: 10px;
}

<div class="grid-container">
  <div style="background: lightblue; height: 100px;"></div>
  <div style="background: lightblue; height: 100px;"></div>
  <div style="background: lightblue; height: 100px;"></div>
</div>

在 Window 大小的特定范围内继续更改 Div 大小

Keep Changing the Div Size on a Certain Scale of Window Size

javascript

css

responsive-design

responsive