使用 jQuery 像素检测来改变菜单布局

Question

我对编码很陌生，需要一些帮助。

我正在尝试让我的网页检测用户的像素大小何时在 768 和 1200 像素之间，并且我计划在有人适合此参数时更改菜单的工作方式。

这是我的代码示例：

if (@media < 768px && @media >1 200px){
    Then
        $(document).ready(function(){
        $('#myMenuButton').menu({
            content: $('#myContent').html(),
            maxHeight: 180,
            positionOpts: { offsetX: 10, offsetY: 20 },
            showSpeed: 300
        });
    });
}

Answer 1

您可以使用 jQuery $(window).resize() 事件。例如，您可以这样做：

$(window).resize(function(){
    var windowWidth = $(window).width(); //Get the user's width
    if (windowWidth < 1200 && windowWidth > 768){
        //Do code
    }
});

调整大小事件的文档：https://api.jquery.com/resize/

请注意，您最好将上述代码包装到准备好的文档中 http://learn.jquery.com/using-jquery-core/document-ready/