Как сделать уменьшение margin при уменьшении экрана?

Question

[Михаил]

Нужно сделать, чтобы при уменьшении экрана размеры блоков уменьшались - это я сделал. Поставил width: 8.333%, max-width и min-width. А вот еще надо, чтобы при этом расстояния между этими блоками тоже уменьшались. При максимальной ширине чтобы было 12px между ними, а при минимальном 9px. Как это можно сделать ?

Comments

[Rustam Bainazarov]

Media-запросы в помощь. Либо делайте на относительных единицах, но с ними точного значения отступов не добиться.

[Михаил]

SmthTo, а если сделать div'ы так сказать "промежуточные" между основными, пойдет ли так ? не будет ли каких проблем ? вот как-то так:

https://codepen.io/mk3mk/pen/pGJxja?editors=0100

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

[Rustam Bainazarov]

Михаил, LOL, ну можно и так :))

Смотрите в сторону Grid тогда уже.

Answer 1

[Dima Polos]

Да, можно, есть такие единицы как vw, vh. В данном случае vw, это ширина вьюпорта, можно размер паддинга/маржина или размер шрифта сделать через vw, читайте и смотрите тут: https://css-tricks.com/viewport-sized-typography/

Comments

[Михаил]

вот так написано в т.з.:
Необходимо сверстать промо-страницу по макету.
Сетка - резиновая, 12 колонок с расстояниями между ними, ширина - 90% от вьюпорта, максимум 1092px, минимум - 819px.
В максимальном состоянии ширина колонки - 80px, расстояние между колонками - 12px. В минимальном - 60px и 9px соответственно.
При ширине экрана менее 859px (мимимальная сетка + поля по 20px) продумать адаптивные стили, вплоть до ширины вьюпорта 320px.

Получится ли с помощью vw сделать чтобы margin был именно 12 пикселей и 9 пикселей ?

[Алексей]

Михаил, получится.

[Dima Polos]

Михаил, да, только немного математики придется применить, чтобы размеры были резиновыми, но в пределах мин и макс значений. Поищите в гугле, я когда-то видел такую формулу.

Answer 2

[Ярослав]

Михаил
используй media query

Answer 3

[lukoie]

Что такое "максимальное" и "минимальное"?
Гуглите относительные единицы % и vw