Как увеличить размер div с помощью окна браузера?

Question

У меня есть div, который я пытаюсь сделать постепенно шире по мере изменения размера окна браузера. То есть, для каждых 50px шире окно, я хотел бы, чтобы ширина div увеличивалась и на 50 пикселей.

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

Я не могу отредактировать JavaScript. Есть ли более программный способ сделать это в чистом CSS?

Here's my code.

div { 
    background-color: #f00; 
    height: 100px; 
} 

@media (max-width: 1600px) { 
    div { 
    width: 800px; 
    } 
} 

@media (max-width: 1550px) { 
    div { 
    width: 750px; 
    } 
} 

/* ... */ 

@media (max-width: 800px) { 
    div { 
    width: 0; 
    } 
} 

Answer 1

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

width: calc(500px + (100% mod 50px) * 50px); 

Плохая новость, однако, заключается в том, что это не полностью поддерживается всеми браузерами. Из того, что я читал по интернету, internet explorer и firefox kinda поддерживают его, но я не мог заставить его работать с сафари/webkit, даже при использовании префикса -webkit.

Edit: после того, как ковыряться еще немного, но mod used to be in the specification back in 2006as of 2013 it's been dropped :(