Question

我希望div仅在屏幕大小达到一定大小时才调整大小。我正在使用jQuery。

<script>
    var screenwidth = $(window).width();
    console.log(screenwidth);
    if(screenwidth>=992){
        $("main").css("width","500px");
        console.log($("main").width());
    }
    if(screenwidth<992 && screenwidth>=650){
        $("main").css("width","300px");
         console.log($("main").width());
    }
</script>

问题：问题是，当屏幕宽度小于992px时，它的大小不会调整为300px，但是我必须刷新浏览器才能使其生效。无论如何，以使其动态和响应。

Answer 1

您可以在CSS中使用@media

@media (max-width: 992px) and (min-width: 650px) { 
  main {width: 300px;} 
}

并指定默认值500px

Answer 2

您可以调查媒体查询，我认为这可以解决您的问题。 https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 3

您可以将函数绑定到“ onresize”事件：

function resize() {
    var screenwidth = $(window).width();
    console.log(screenwidth);
    if(screenwidth>=992){
        $("main").css("width","500px");
        console.log($("main").width());
    }
    if(screenwidth<992 && screenwidth>=650){
        $("main").css("width","300px");
         console.log($("main").width());
    }
}
resize();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body onresize="resize()">
  <main></main>
</body>

根据浏览器大小调整div大小

3 个答案: