javascript - jquery窗口宽度条件

Question

稍后编辑：我试过这个：

$(document).ready(function() {
if ( $(window).width() > 800 ) {
    $("#header").hide();
}
else {
$("#header").show();
}

});

如果我将窗口大小调整到 800 以下，标题仍然不可见。问题是什么 ？我不能使用 css 媒体查询，因为我想在窗口大于 800 时执行其他功能。

Answer 1

If you want to do this in Javascript with JQuery, you'll probably want to know a couple things: what's the width right now, and what's the width after the user resizes? You'll probably have code that looks something like this:

function checkSize(){
  if ( $(window).width() > 1200 ){
    //do whatever
  }
}

//When the page is loaded
$(document).ready(function(){
  //Add a listener to check the size of the document when you load
  $(document).resize(checkSize);

  //Check the size now.
  checkSize();
});

Alternatively, you can use CSS Media queries to adjust the CSS when the page is a certain size, but it won't execute any Javascript. Here's an example:

@media all and (max-width: 1199px) {
  #header{
    display:none;
  }
}

This has some more helpful examples and explanations: http://css-tricks.com/css-media-queries/