CSS：通過瀏覽器窗口的大小遞增地增加div寬度

Question

我有一個div，我希望通過瀏覽器的大小間隔進行縮放。我可以使用js或jQuery輕鬆完成此操作，但我認爲只有CSS解決方案。也許媒體查詢是一種解決方案，但也許有一個更簡單的解決方案？

隨着窗口大小增加100px，我想爲div的寬度添加另一個100px。我只想以100px的增量增加div的寬度，所以使用％似乎不是一個選項。

Answer 1

@media all and (min-width: 100px) and (max-width: 200px) { 
    div { 
    width: 100px; 
    } 
} 
@media all and (min-width: 200px) and (max-width: 300px) { 
    div { 
    width: 200px; 
    } 
} 

等等...