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

Question

我正在尝试DIV随着浏览器大小的变化而改变宽度。

不是以百分比可以处理的比例，但仍然依赖于屏幕大小。我正在尝试使 div 最大为浏览器宽度的 80%，只要它除以 20。如果屏幕是 1000px 宽，那么 div 将为 800px，如果屏幕是 1024px，那么它仍然是 800px（因为 80 1024 的 % 是 819.2，不除以 20）。

除了做很多媒体查询，我不知道该怎么做。

Answer 1

这应该有希望让你上路。它使用 jQuery 以 20px 为增量调整 div 的大小。它并不完美，但它是一个开始。

http://jsfiddle.net/ydtdS/3/

 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());