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

Question

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

不是某种可以用百分比处理的比例，但仍然依赖于屏幕尺寸。我正在尝试使 div 最大为浏览器宽度的 80%，只要它除以 20。如果屏幕是 1000px 宽，那么 div 将为 800px，如果屏幕是 1024px，那么它仍然是 800px(因为 1024 的 80% 是 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());