Question

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

Answer 1

您可能希望使用媒体查询，但是，如果您真的想要这样做，则可以收听调整大小事件：

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

如果您只想在断点超过时重新加载，则可以跟踪最后一个内部宽度，只有在超过某个值时才重新加载。或者不使用innerWidth，而是使用div的宽度。例如：

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>

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

2 个答案: