Как сделать динамическую ширину блока в зависимости от ширины экрана через calc?

Question

[frie666]

Есть блок

<div class='block'></div>
.block{
    width:760px;
}

Хочу чтобы когда у юзера уменьшалась ширина экрана от 1120px до 760px этот div class='block' тоже менял свою ширину от 760px к 400px и подстраивался под размеры экрана.

Если по тупому сделать, то можно вот так:

@media screen and (max-width: 1119px){
       . block{
            width:759px;
         }
}
@media screen and (max-width: 1118px){
        . block{
            width:758px;
         }
}
@media screen and (max-width: 1117px){
        . block{
            width:757px;
         }
}

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

Но не понимаю как работает calc. Кучу статей и видосов пересмотрел, не понятно всё равно.

Answer 1

[Вадим]

width: calc(100vw - 360px); ?

Comments

[frie666]

гениально! спасибо, работает )