Question

当浏览器调整大小时，我需要使用jquery增加或减少<div>的宽度。这是我的代码。

if ($(window).width() > 990 && $(window).width() < 1190) {
    $("#greybor").width(268)
    $("#srchclnt").width("245")
} else if ($(window).width() > 1200 && $(window).width() < 1300) {
    $("#greybor").width(400)
} else
    $(window).width() > 1350 {
        $("#greybor").width(580)
}

它取最后输入的宽度，当我调整浏览器大小时，<div>宽度不会减少，它仍然是最后一个。

我甚至尝试过addClass和removeClass方法但仍然是同样的事情。谢谢＆amp;问候。

Answer 1

你为什么不用css媒体查询呢？ https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

您应该将css规则用于此类操作，并且最好通过将类附加到div元素。有了Id，你可以这样做：

@media (max-width: 1189px) {
    .graybor  {
        width: 268px;
    }
    .srchclnt{
        width: 245px;
    }
}
@media (min-width: 1190px) {
    .graybor  {
        width: 400px;
    }
}

@media (min-width: 1301px) {
    .graybor  {
        width: 580px;
    }
}

<div class='graybor'>
    graybor area 
</div>
<div class='srchclnt'>
   srchclnt area 
</div>

https://jsfiddle.net/m1ofw5hv/

当浏览器调整大小时，需要增加或减少<div>的宽度，jquery

2 个答案: