Question

我正在为我的网站添加媒体查询，并希望更改规则。目前我的规则是：

<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>

我想说当我的屏幕最大宽度为400px时，顶部为50，左边为1258.

有办法做到这一点吗？

Answer 1

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

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

或使用JQuery（Get the size of the screen, current web page and browser window）

使用它，您应该能够确定所需的值，然后相应地修改您的JQuery .Animate。

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

1 个答案: