Ответ 1
Вы можете использовать функцию CSS calc(). Хотя он не будет препятствовать использованию медиа-запросов, он может вычислять границу между элементами и контейнерами.
DEMO
В этой демонстрации используются:
- calc() функция CSS. В этом контексте он будет поддерживаться IE9+. Возможно, вы захотите добавить префикс
-webkit-для некоторых браузеров webkit. для получения дополнительной информации см. canIuse. - 4 мультимедийных запроса, чтобы изменить количество элементов, отображаемых в одной строке и полях соответственно.
- встроенный блок. Это связано с пробелом (в демо я использовал технику размера шрифта, но вы можете использовать другую, см. Здесь).
Объяснение:
Точки прерывания медиа-контента:
Они рассчитываются по ширине элементов. Поскольку каждый элемент имеет ширину 200px, я должен был выбрать точки останова в screen width = 400px/600px/800px/1000px, но поскольку медиа-запросы включают полосу прокрутки, с этими значениями, элементам не хватило бы места и перекрывать друг друга.
Полосы прокрутки не имеют одинаковой ширины в каждом браузере, поэтому я выбрал более высокое значение, чтобы убедиться, что перекрытие не происходит.
Вот пример этого поведения с "логическими" точками прерывания медиа-контента.
Расчет маржи:
Прежде всего процентные поля и отступы всегда рассчитываются в соответствии с оставшейся шириной контейнера (исключение), поэтому верхнее и нижнее поля/прокладки имеют одинаковый расчет как левые/правые.
В принципе, вычисление размера полей:
(remaining width (=100%) - the sum of grid elements width) / number of gaps
Но
Слева и верхние зазоры заполняются из контейнера, а остальные промежутки - правым и нижним краем элемента блока. Расчет маржи для блоков должен учитывать это, а деление - на number of gaps -1.
HTML:
<ul id="container">
<li class="block">...</li>
<li class="block">...</li>
...
</div>
CSS:
#container{
font-size:0;
padding-top: calc((100% - 1000px)/6);
padding-left:calc((100% - 1000px)/6);}
.block {
font-size:20px;
width: 200px;
height: 200px;
display:inline-block;
margin-right: calc((100% - 1000px)/5);
margin-bottom: calc((100% - 1000px)/5);
}
@media screen and (max-width: 430px) {
.block {
margin: calc(50% - 100px);
}
}
@media screen and (min-width: 431px) and (max-width: 630px) {
#container{
padding-top: calc((100% - 400px)/3);
padding-left:calc((100% - 400px)/3);
}
.block {
margin-right: calc((100% - 400px)/2);
margin-bottom: calc((100% - 400px)/2);
}
}
@media screen and (min-width: 631px) and (max-width: 830px) {
#container{
padding-top: calc((100% - 600px)/4);
padding-left:calc((100% - 600px)/4);
}
.block {
margin-right: calc((100% - 600px)/3);
margin-bottom: calc((100% - 600px)/3);
}
}
@media screen and (min-width: 831px) and (max-width: 1030px) {
#container{
padding-top: calc((100% - 800px)/5);
padding-left:calc((100% - 800px)/5);
}
.block {
margin-right: calc((100% - 800px)/4);
margin-bottom: calc((100% - 800px)/4);
}
}