调整窗口大小时减少边距

Question

我正在努力让我的网站的一部分响应，但我遇到了一个我似乎无法解决的问题。

每个“行”有3个矩形内联块div，边距为右：在动态添加的包装中为100px。在我让窗口变小的那一刻，第三个div不再适合行了，并按预期推下。

但我想要实现的是，边距右边变小，直到让我们说div之间的20px然后第三个div被推到第二行并且边距再次变大，直到它再次不适合然后第二个div移动到第二行，第三个div移动到第三行，依此类推。

HTML

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

CSS：

.box{
    width:100px;
    height:150px;
    background-color:red;
    display:inline-block;
    margin-right:96px;
}
.box:nth-child(3n+3) { 
    margin-right: 0px; 
}
#wrapper{
    height:500px;
    width:500px;
    background-color: #eee;
}    

这是我的小提琴： https://jsfiddle.net/wucz4nhs/1/

以下是一些图片，以使其更清晰：

以这样的方式开始：

调整中间空间大小时

当它不再适合时，它会变为每行2个div

Answer 1

您应该能够通过媒体查询实现此目的。您可以在css中为某些断点设置这些。

例如：

@media (max-width: 768px) {
    .box {
        width: 50px;
    }
}

因此，当浏览器或设备的宽度为768px或更短时，.box的宽度将为50px。但是，在执行此操作时，您还需要将100px宽度添加到更大的媒体查询中（否则将覆盖媒体查询）。因此，当浏览器或设备大于768px时，它将采用100px宽度。

因此，您可以从全局.box中删除width属性，执行以下操作：

@media (min-width: 769px) {
    .box {
        width: 100px;
    }
}
.box{
    display: block;
    height:150px;
    background-color: red;
    margin: 0 48px 0 48px;
}

当然，这是编写媒体查询的最简单方法。有大量的例子可用于特定的宽度设置，甚至是特定于设备的。

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 2

您应该使用xy%代替xy px。

margin: 5% 5% 5% 5%;将使用您网站左侧和右侧宽度的5％以及网站高度的5％。通过这种方式，它可以在不使用@media screen and (max-width: xy px)的情况下进行响应。