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

jQuery - add pixels to height according to screen width

本文关键字：像素 添加 高度 屏幕 jQuery      更新时间：2023-09-26

我需要用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。

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

你去[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();
});

试试这个

$(window).resize(function() {
    var bodyheight = $(document).height();
    var divHeight = (bodyheight-10)/2;
    $('.grow').css("height", divHeight+"px");;
});

试试这个

var width = (+$(window).width());
var divHeight = (width-10)/2;
$(".grow").height(divHeight);

var $grow = $('.grow'),
    $window = $(window);
$(window)
    .resize(function () {
        var windowWidth = $window.width();
        if (windowWidth > 90) {
            $grow.height(~~ (windowWidth / 4));
        }
    })
    .resize();

在 dom ready 上第一次触发它。

http://jsfiddle.net/techunter/Xug5A/

小心备注.grow边距和填充:)

相关文章：