Question

稍后编辑：我试过这个：

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

});

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

Answer 1

如果你想在Javascript和JQuery中这样做，你可能想知道一些事情：现在的宽度是什么，用户调整大小后的宽度是多少？你可能会有类似这样的代码：

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();
});

或者，您可以使用CSS Media查询在页面具有特定大小时调整CSS，但它不会执行任何Javascript。这是一个例子：

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

这有一些更有用的示例和解释：http://css-tricks.com/css-media-queries/

jquery窗口宽度条件

1 个答案: