3

我正在尝试我的第一个“渐进式增强”站点，并且有一个关于 jQuery 追加和浏览器调整大小的问题。基本上，我将其设置为加载的默认站点是移动版本，然后如果浏览器宽度至少为 1100 像素，我有一个 jQuery 函数可以将桌面元素附加到页面上的 div。

它工作得很好，但现在我只需要解决调整大小的问题。目前，如果您将浏览器窗口的大小调整为低于 1100 像素宽度，则附加到 div 的元素不会消失，直到您刷新浏览器。我想这样做，如果浏览器窗口的大小调整到 1100px 以下，附加的元素会在不刷新的情况下消失。

有人能指出我正确的方向吗？谢谢！

HTML：

<div id="section1">

</div>

Javascript：

if (window.matchMedia("(min-width: 1100px)").matches) {
    $("#section1").append("\
        <div class='placeholder'>\
            <img src='assets/site/desktop_placeholder.png' />\
        </div>\
    ");
}
4

1 回答 1

0

我一直在玩它，我想我已经接近了。让我知道是否有更好的方法来执行此操作，或者您是否发现此代码有任何问题。谢谢！

function appendElements() {
    //swap in desktop content
    if (window.matchMedia("(min-width: 1100px)").matches) {
        $("#section1").append("\
            <div class='placeholder'>\
                <img src='assets/site/desktop_placeholder.png' />\
            </div>\
        ");
    }
    }else{
        $("#section1").empty();
    }
}

if (window.matchMedia("(min-width: 1100px)").matches) {
    appendElements();
}

$(window).resize(function(){
    appendElements();    
});
于 2013-11-18T21:58:54.233 回答