Javascript 根据窗口大小更改变量-jQuery/JS

对此有问题。简言之，当屏幕>=910px时，我需要var hprH=555px，当屏幕在910px-400px和150px之间时，当屏幕<400px时，我需要var hprH=300px。我尝试了CSS媒体查询，但没有成功。所以现在我试图用js来做这件事

这是全局变量

我想改变这个如上所述

下面是使用该变量的代码，它一直工作到我需要hprH高度小于555px为止

$(function() {
    hpr_init();

    $('#hpr .thumb').click(function(){
            clearInterval(timer);
            showHPR($(this));
    });
            timer = setInterval(function(){showHPR(nextThumb);}, interval);
    $(window).resize(function(){
            hprH = $('#hpr').height();
            $('.selected').height(hprH);
    });
});
function showHPR(obj){
    $(obj).fadeOut(300,function(){  
            $(obj).parent().animate({ 
                    height:hprH,
                    zIndex:0,
                    bottom:0
            },duration);

            $(obj).parent().find('img').animate({ 
                            top:0
                    },500,function(){
                            $(this).css({bottom:'auto'});
                    });
            $(obj).parent().find('.content').fadeIn(); 
            lastThumb(obj); 
     });        
}

---

你能为我们添加一个JSFIDLE来处理你的代码吗？需要查看您正在使用的HTML。我相信它仍然可以在CSS中完成，除非你需要一些逻辑完成。。。但我需要先玩它。@philtune$window.height将返回窗口的高度。您可以从这里开始。注意-我没有编写这个代码-我对它进行了一些清理，但我继承了这个：[并用if$window.height>xxx{dosomething}之类的if语句进行包装

$(function() {
    hpr_init();

    $('#hpr .thumb').click(function(){
            clearInterval(timer);
            showHPR($(this));
    });
            timer = setInterval(function(){showHPR(nextThumb);}, interval);
    $(window).resize(function(){
            hprH = $('#hpr').height();
            $('.selected').height(hprH);
    });
});
function showHPR(obj){
    $(obj).fadeOut(300,function(){  
            $(obj).parent().animate({ 
                    height:hprH,
                    zIndex:0,
                    bottom:0
            },duration);

            $(obj).parent().find('img').animate({ 
                            top:0
                    },500,function(){
                            $(this).css({bottom:'auto'});
                    });
            $(obj).parent().find('.content').fadeIn(); 
            lastThumb(obj); 
     });        
}