调整容器div大小时刷新页面

Question

这是一个非常简单明了的问题：如果使用jquery将媒体查询断点设置为750px和970px，是否可以在浏览器调整大小时更改.container div的宽度后刷新页面？

Answer 1

You probably want to use a media query instead but, you can listen to a resize event if you really want to do this:

addEventListener('resize', function() {
    location.reload();
});

If you want to only reload if a breakpoint is past, you can keep track of the last innerWidth and only reload if a certain value is crossed. Or instead of using innerWidth, use a width of a div. For example:

var last = document.getElementById('mydiv').clientWidth;
addEventListener('resize', function() {
    var current = document.getElementById('mydiv').clientWidth;
    if (current != last) location.reload();
    last = current;
});

Answer 2

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div id="mydiv">
    <h1>Page Resize demo</h1>
</div>
<script>
    $(window).resize(function () 
    {
        if ($(window).width() < 700) 
        {
            $("#mydiv").css("background", "red");
        } 
        else 
        {
            $("#mydiv").css("background", "orange");
        }
    });
</script>