JQuery 调整浏览器宽度，隐藏 Div > 1024答案

【问题标题】：JQuery Resize Browser Width, Hide Div at > 1024JQuery 调整浏览器宽度，隐藏 Div > 1024
【发布时间】：2012-05-10 17:28:51
【问题描述】：

我想要完成的事情很简单。假设您正在查看一个网站，然后您在 iPod Touch、小型平板电脑上查看它，或者您自己调整了浏览器的大小，但浏览器的宽度为 1024 像素或更低，并且 div 内的文本填充在所有额外的内容。所以对我来说，基本构造的答案很简单。当浏览器达到 1024 像素或更低时隐藏文本。

我试过这个，但它似乎不起作用。这里有什么帮助吗？

$(window).resize(function(){
    if($(window).width() < 1024 ) {
        $('h2#head1').hide();}
    else {
        $('h2#head1').show();};
});

【问题讨论】：

【解决方案1】：

在这种情况下，这是因为您的选择器已关闭（应该是 'h2 #head1' 或只是 '#head1'，而不是 h2#head1）。见http://jsfiddle.net/ERBKU/

但是，我还有其他一些观察：

在实际调整窗口大小之前不会处理，这意味着在加载时它不会被处理。因此，您需要在加载时加倍关注此逻辑。但是，这让我想到了第 2 点……
我认为结合一点 jQuery 和 CSS，你会得到更好的结果。我引用了 Modernizr 和早期 jQuery Mobile 中使用的方法。基本上，在加载和调整大小时，您想要检测视口宽度，如果它满足宽度阈值，则将特定的 CSS 选择器添加到 html 元素。如果满足阈值，此选择器可以影响目标元素的 CSS 属性。看到这个小提琴：http://jsfiddle.net/b5LYq/1/ 这条路线的好处是你只需要一点点 jQuery 的 sn-p，你可以通过在 CSS 中添加更多的布局规则来轻松地调整其他元素的显示属性。比维护一大块 jQuery 来操作页面以使其以您想要的方式显示要容易得多。此外，您可以添加额外的布局阈值，它仍然可以正常工作。

【讨论】：