Question

我正在尝试根据当前窗口/ iframe大小调整div的大小。

例如

如果尺寸为1200 我想调整/调整div的大小

如果窗口小于800 如果winnow / iframe太小，我想禁用该栏的右侧部分。

我怎样才能使用js或javascript 它可以有1到4个iframe列，并且可以有许多不同的屏幕分辨率。

由于

我在下面尝试了以下媒体查询代码，但是当你有2个iframe，每个500 x500或者我可以有一个iframe，窗口大小可以根据监视器/分辨率等来调整大小。我注意到，如果我修复了一些东西.. somethingelse的变化。

    @media screen and (min-width: 1200px) and (max-width: 1510px)  {
      #topbar {
    background-color: #E5EBF1;
        border: 0 solid red;
        font-size: 11px;
        height: 31px;
        padding: 0 0 0 2px;
        position: relative;
        width: 100%;
        z-index: 1111;
    }
    .objects-b {
      /*
      float: right;
      width: 64%;
      border: 0px solid green;
      margin: 0;
      padding: 7px 0 */
      display:none;
     }

     #topbar .hierarchialgroups-b {
        float: left;
      width: 240px;
      bordeR: 3px solid red;
    }
    .rest-b {
      /*
      padding: 0;
      margin: 0;
      border: 0px solid blue;
      width: 616px;
      align: right */
      display:none;
    }
    }
    @media screen and (min-width: 440px) and (max-width: 880px)  {
      #topbar {
    background-color: #E5EBF1;
        border: 0 solid red;
        font-size: 11px;
        height: 31px;
        padding: 0 0 0 2px;
        position: relative;
        width: 60%;
        z-index: 1111;
    }
    .objects-b {

      display:none;
     }

     #topbar .selectgroups-b {
        float: left;
      width: 39%;
      bordeR: 1px solid yellow;
    }
    .rest-b {

      display:none;
    }
    }

HTML BIT

    <div id="tbar" >

    <div class="hierarchialgroups-b"><strong>Showing:</strong><select
      id="groupselect">
      <option value="0" selected>...loading groups</option>
    </select></div>

    <div class="objects-b">
    <ul class="rest-b">
      <li><strong>Size Represents</strong>: #&nbsp;Objects</li>
      <li><strong>Color Represents</strong>: Group Impacts</li>
      <li><span class="color1">&nbsp;</span>Normal</li>
      <li><span class="color2">&nbsp;</span>Degraded</li>
      <li><span class="color3">&nbsp;</span>Critical</li>
    </ul>

    </div>

Answer 1

使用jquery使用$（'＃id'）引用div，其中id是div的id，你应该能够使用window.innerWidth / window.innerHeight检查窗口尺寸。基于宽度/高度，您应该能够通过添加css属性来修改div来改变div的尺寸

Answer 2

使用.resize()功能

$(window).resize(function() {
    var height=$(window).height();
    var width=$(window).width();
    $('#div').css({"width":width,"height":height});
});

以下是code

Answer 3

window.onresize = function() { // this will fire every time the browser is resized..
   var bWidth = window.innerWidth; // get the viewport width. 
   var el = document.getElementById("#div"); // get the div you want to work with
   if(bWidth <= 800) {
      // viewport is less than or equal to 800
   } else if(bWidth >= 1200) {
      // viewport is greater than or equal to 1200
   }
}

然后确保它在第一次开始时被激活......

 window.onload = function() {
    this.onresize();
 };

div用js或jquery调整大小

3 个答案: