Ширина деления постепенно увеличивается при уменьшении ширины окна (с медиазапросами)

Question

можно ли увеличить ширину div при уменьшении ширины окна без медиазапросов?

Например, div, который занимает 50% ширины, когда экран имеет ширину 1920 пикселей, и 80%, когда он составляет 800 пикселей и ширина в процентах постепенно увеличивается.

Спасибо.

Answer 1

Да, это:

div.myWidth{
    width:calc( 1vw * 0.25 + 480px );
}

или

div.myWidth{
    width:calc( 1vw / 4 + 480px );
}

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

Также обратите внимание, что абсолютная ширина div не увеличивается, увеличивается только его процент от ширины. Ваш вопрос был немного противоречивым в этом.

Однако, как только вы достигнете 480px, div заполнит все пространство. Ниже 480px div будет простираться за правую границу окна, поэтому вы можете захотеть ограничить это:

div.myWidth{
    width:calc( 1vw / 4 + 480px );
    max-width:1vw;
}