JQuery调整浏览器宽度，隐藏Div>＆gt; 1024

Question

我想要完成的事情很简单。假设您正在查看网站，然后您可以在iPod Touch，小平板电脑上查看它，或者您自己调整浏览器大小，但浏览器的宽度要么是1024px，要么是div内的文本填充超过所有额外的内容。所以我的答案对于基本结构来说很简单。当浏览器达到1024px或更低时隐藏文本。

我试过这个，但似乎没有用。这里有什么帮助吗？

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

Answer 1

在这种情况下，这是因为你的选择器是关闭的（应该是'h2＃head1'或简单地'＃head1'，而不是h2＃head1）。见http://jsfiddle.net/ERBKU/

但是，我还有其他几点意见：

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