Question

为了扩展对我网站的响应能力，我添加了以下JQuery来处理屏幕宽度低于1300px的情况。它几乎完美无缺 - 但它没有考虑屏幕尺寸更新，即。当屏幕小于1300时，它会应用附加，但是如果我然后将屏幕调整到1300px以上，它将保持条件更改。

$(window).on('resize',function() {
    if ($(this).width() < 1300) {
        $("#id").appendTo("#div");
        $("#id").appendTo("#div");
    }
});

Answer 1

媒体查询将是更好的解决方案，但如果您想保留已有的内容，请使用以下jquery在项目再次达到完整大小后删除该项目。

var isAppended = false; // place this at the top of your file
$(window).on('resize',function(){
  var width = $(this).width();
  // dont append unless it doesnt exist 
  // and size smaller than break size
  if (!isAppended && width < 1300) {
    $("#id").appendTo("#div");
    $("#id2").appendTo("#div");
    isAppended = true;
  }
  else if (isAppended && width >= 1300) {
    $("#id").remove();
    $("#id2").remove();
    isAppended = false;
});

为了使用媒体查询来解决问题

HTML

<div id="id1"></div>

CSS

#id1 {
  display: none;
}

@media (max-width: 1300px) {
  #id1 {
    display: block;
  }
}

Answer 2

使用媒体查询在不同屏幕尺寸上的响应性，它比jquery

更容易处理

使用JQuery

2 个答案: