javascript - jQuery - 根据屏幕宽度将像素添加到高度

Question

我需要用 jQuery 来做到这一点。

假设我在 HTML 中有一个简单的 div 元素:

<div class="grow"></div>

CSS:

body, html {
width: 100%; 
height:100%;
min-height:100%
}

.grow {
height:20px; 
width:100%;
}

我需要编写脚本，其中 DIV grow 将根据屏幕分辨率增长。从 90px 开始。

像这样:

对于 90px 屏幕宽 DIV 高度将为 - 20px 对于 130px 屏幕宽 DIV 高度将为 - 30px

所以对于任何 4px 的宽度高度都会增长 1px。

我尝试了很多解决方案，但都没有成功。任何帮助将不胜感激。

Answer 1

给你 [http://jsfiddle.net/6KfHy/1/]

var baseWidth = 90;
var stepWidth = 4;
var baseHeight = 20;
var growHeightPerStep = 1;

function changeHeight() {
    var windowW = $(window).width();
    var diffWidth = windowW - baseWidth;
    var diffHeight = parseInt(diffWidth / 4, 10);

    $('.grow').css('height', baseHeight + diffHeight + 'px');
}

changeHeight();

$(window).resize(function() {
    changeHeight();
});