如何在屏幕宽度更改时激活.insertBefore？

Question

我有这个片段，如果屏幕宽度低于767px，则切换二次包装的位置在主包装上方。这很好，但它只适用于刷新。当屏幕宽度改变时，我如何让它自动工作？

谢谢！总新手在这里。

jQuery(document).ready(function(){ 

if(screen.width<=767){ 

jQuery('body.single #secondary').insertBefore('#primary'); 
} 

}); 

Answer 1

好像你正在使用jQuery，所以我会建议.resize（）方法。

https://api.jquery.com/resize/

每当窗口大小这将触发。你可以在那时做任何你需要的事情。

$(window).resize(function(){ 
    If (myWindow.width() >= windowThreshold){ 
     //do all the things... 
    } 
}); 

Answer 2

window.addEventListener('resize', function() { 
// do something with screen width 
}); 

或使用jQuery：

$(window).on('resize', function() { 
    // do something with screen width 
}) 

Answer 3

我推荐使用.resize()方法，因为您使用的是JQuery。调整窗口大小时调用此方法。

现在，你可以添加你这样的代码。

var windowThreshold = 767; 
 

 
$(window).resize(function() { 
 
    if ($(window).width() < windowThreshold + 1) { 
 
    // do something with $(window).width() 
 
    $("#log").append("<div>The window size is " + $(window).width() + "px</div>"); 
 
    $('#secondary').insertBefore('#primary'); 
 
    } 
 
});

#primary { 
 
    background-color: red; 
 
} 
 

 
#secondary { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="log"></div> 
 
<div id="primary">primary</div> 
 
<div id="secondary">secondary</div>

您还可以使用.on("resize", function() {})

$(window).on('resize', function() { 
 
    if ($(window).width() < windowThreshold + 1) { 
 
    // do something with $(window).width() 
 
    $("#log").append("<div>The window size is " + $(window).width() + "px</div>"); 
 
    $('#secondary').insertBefore('#primary'); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

我知道这有一个公认的答案，而只是备案，你可以让CSS做通过使用媒体查询和flexbox进行工作。

body { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
} 
 
div { 
 
    margin: 0 auto; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.box { 
 
    background: tomato; 
 
    order: 1; 
 
} 
 
.circle { 
 
    border-radius: 50px; 
 
    background: lightblue; 
 
    order: 2; 
 
} 
 
@media (max-width: 767px) { 
 
    .box { 
 
    order: 2; 
 
    } 
 
}

<div class="circle"></div> 
 
<div class="box"></div>