Css 如何以相对于浏览器大小的增量调整元素的大小？

我试图使

DIV

宽度随着浏览器大小的变化而变化

不是以某种可以用百分比来处理的比率，但仍然依赖于屏幕大小。 我试图将div设置为浏览器宽度的最大值的80%，只要除以20即可。 如果屏幕宽度为1000px，则div将为800px，如果屏幕宽度为1024px，则仍为800px（因为1024的80%为819.2，而不是除以20）

---

除了做大量的媒体查询外，我不知道该怎么做。

希望这能帮你找到出路。它使用jQuery以20px的增量调整div的大小。这并不完美，但这只是一个开始

---

你可以使用javascript吗？如果你不只是做大量的媒体查询，你会不得不这么做。还有，让它可以被20整除的要求是什么？通过更好地了解您需要实现的目标，我们可以提供更好的建议。您可以滥用SASS之类的预处理器，在循环中输出所需的媒体查询。如果是一个元素的一个属性，那将是一个很好的尝试，我想如果初始视口宽度是1024px呢？

 function tale(div,w) {
 if(w%20==0) {
    $(div).text(w);
    $(div).css("width",w);
 } else {
    w = Math.floor(w / 20)*20;
    $(div).text(w);
    $(div).css("width",w);
 }
}
$(window).resize(function() {
    var windowWidth = $(window).width();
    tale(".twenty",windowWidth); 
});

tale(".twenty",$(window).width());