当文档宽度更改时更改Javascript规则

我正在对我的网站进行媒体查询，并希望更改规则。 目前我的规则是：

<script>
        (function($){
            $(document).on('click', '.container', function(){
                $(this).addClass('active');
                $('.container:not(.active):eq(0)').animate({top: -1258, left: 50});
                $('.container:not(.active):eq(1)').animate({top: 1258, left: -50});
                if (this.id == 'center' || this.id == 'left') {
                  $('.menu').addClass('red');
                }
            });
            $(document).on('click', '.container.active', function(){
                $('.container:not(.active):eq(0)').animate({top: 0, left: 0});
                $('.container:not(.active):eq(1)').animate({top: 0, left: 0});
                $(this).removeClass('active');

                $('.menu').removeClass('red');

            });
        })(jQuery);
</script>

（函数（$）{
$（文档）.on（'单击'，'.container'，函数（）{
$（this.addClass（'active'）；
$（'.container:not（.active）：eq（0）'）。设置动画（{top:-1258，left:50}）；
$（'.container:not（.active）：eq（1）'）。设置动画（{top:1258，left:-50}）；
if（this.id=='center'| | this.id=='left'）{
$（'.menu'）.addClass（'red'）；
}
});
$（document）.on（'click'，'.container.active'，function（）{
$（'.container:not（.active）：eq（0）'）。设置动画（{top:0，left:0}）；
$（'.container:not（.active）：eq（1）'）。设置动画（{top:0，left:0}）；
$（this.removeClass（'active'）；
$（'.menu'）.removeClass（'red'）；
});
})（jQuery）；

我想说，当我的屏幕最大宽度为400px时，动画顶部：50，左侧1258

---

有办法做到这一点吗？

您可以在Javascript中检测高度和宽度，如下所示：

var height = document.body.clientHeight;
var width = document.body.clientWidth;

或者使用JQuery（）

---

使用它，您应该能够确定需要哪些值，然后修改JQuery。相应地设置动画

$（窗口）.resize（）

？这些有帮助吗？我要把这个放在脚本的顶部吗？我是否将值放在您放置“高度”和“宽度”的位置？此代码仅加载高度和宽度，然后需要检查尺寸是否高于或低于您需要的尺寸，然后更改动画值。