如何在window.resize上動態調整3 div的大小？

Question

我有以下HTML：

<div style="min-width:1024px;max-width:82%;margin:0 auto;overflow:auto">
    <div style="height:344px;width:100%;float:left;margin-top:72px"></div>
    <div style="width:100%;float:left;">
        <div id="left" class="radius" style="height:700px;width:220px;background:#fff;float:left"></div>
        <div id="middle" class="radius" style="width:760px;background:#fff;float:left;margin:0px 18px;">
            <div style="height:700px;width:100%;float:left"></div>
        </div>
        <div id="right" class="radius" style="height:700px;width:280px;background:#fff;float:left"></div>
    </div>
</div>

和腳本：

function scalling() {
    var a = $(window).width();
    if (a < '1300') {
        var def = a * 82 / 100,
            l = 22000 * def / 10,
            m = 76000 * def / 10,
            p = 28000 * def / 10;
        $('#left').css('width', l);
        $('#middle').css('width', m);
        $('#right').css('width', p);
    } else {
        $('#left').css('width', '220px');
        $('#middle').css('width', '760px');
        $('#right').css('width', '280px');
    }
}

scalling();
$(window).resize(function () {
    scalling();
});

它可以工作，但是當窗口縮放到更大的div時會以較小的方式增加div的大小，而當窗口較小時div會更大

對不起，我很糟糕

Answer 1

您可以簡單地使用以下CSS語句：

@media ( min-width :1300px){
    selector{
        width: constant-value;
    }
}

@media ( max-width :1300px){
    selector{
        width: percent-value;
    }
}