Уменьшить размер при изменении размера окна

Question

Я пытаюсь сделать часть моего сайта отзывчивой, но у меня проблема, которую я не могу решить.

У меня есть 3 прямоугольных встроенных блока div на "row" с margin-right: 100px в оболочке, которые динамически добавляются. В тот момент, когда я уменьшаю свое окно, третий div больше не вписывается в строку и подталкивается так, как ожидалось.

Но я хочу добиться того, что margin-right получится меньше, пока мы не скажем 20px между div и этим, тогда третий 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-дивы в строке

Answer 1

Вы должны быть в состоянии достичь этого с помощью медиа-запросов. Вы можете установить их в своем css для определенных точек останова.

Например:

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

Так что, когда браузер или устройство 768px или меньше по ширине, .box будет принимать на ширине 50px. Однако при этом вам также потребуется добавить ширину 100px в более крупный медиа-запрос (иначе медиа-запрос будет перезаписан). Поэтому, когда браузер или устройство больше 768px, он будет использовать ширину 100px.

Таким образом, вы можете удалить свойство ширины от глобального .box сделать что-то вроде этого:

@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).