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

Question

有这个问题。所以简而言之，当屏幕在＆gt; = 910px时，我想要var hprH = 555px，然后当屏幕在910px-400px和150px之间时，hprH = 300px。 400像素。我尝试使用CSS媒体查询，但无法使其工作。所以现在我只想在js中这样做。

这是全局变量

var hprH = $('#hpr').height();

我想如上所述改变这一点。

以下是使用该变量的代码，该代码在我需要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); 
     });        
}