JavaScript样式媒体查询

Question

用JavaScript复制CSS媒体查询的最佳方法是什么？

我有一个脚本，我只想在更宽的视口宽度上运行（已实现）（请参见示例代码）。但是我也想检查调整大小。

我知道通常情况下，人们不会调整浏览器窗口的大小，因此onload很好，但我担心如果有人在平板电脑的纵向和横向视图之间切换，脚本可能会引起问题。

由于此脚本会影响移动/平板电脑设备上的导航功能，我认为重要的是检查调整大小？

if ( $(window).width() > 1024) { /* [1] */   

    $(function() {
        var $el,
            leftPos,
            newWidth,
            $mainNav = $(".site-nav__list");

        $mainNav.append("<div class='site-nav__line'></div>");
        var $magicLine = $(".site-nav__line"),
            $currentMenu = $(".current-menu-item");

        $magicLine
            .width($currentMenu.length ? $currentMenu.width() : 0)
            .css("left", $currentMenu.length ? $currentMenu.find("a").position().left : 0)
            .data("origLeft", $magicLine.position().left)
            .data("origWidth", $magicLine.width());

        var hoverOut;

        $(".site-nav__list li a").hover(function() {
            clearTimeout(hoverOut);

                $el = $(this);
                leftPos = $el.position().left;
                newWidth = $el.parent().width();

                if (!$magicLine.width()) {
                    $magicLine.stop().hide().css({
                        left: leftPos,
                        width: newWidth
                    }).fadeIn(100);
                } else {
                    $magicLine.stop().animate({
                        opacity: 1,
                        left: leftPos,
                        width: newWidth
                    });
                }
            },
            function() {
                hoverOut = setTimeout(function() {
                    if (!$currentMenu.length) {
                        $magicLine.fadeOut(100, function() {
                            $magicLine.css({
                                left: $magicLine.data("origLeft"),
                                width: $magicLine.data("origWidth")
                            });
                        });
                    } else {
                        $magicLine.stop().animate({
                            left: $magicLine.data("origLeft"),
                            width: $magicLine.data("origWidth")
                        });
                    }
                }, 100);
            }
        );
    });

}