jQuery 调整 CSS 元素的大小

Question

我知道如何使用 CSS 解决我的问题。我需要设置从像素到百分比的每一个值，其中有 1000 个（有趣的时间！）。无论我是在事后还是在进行时这样做，总是很痛苦。我已经能够更快地设计避免它以支持像素，但现在希望一起避免它。

我假设使用 CSS 百分比（我的整个页面是固定的纵横比，所以实际上每个元素都需要转换为百分比）将是最轻量级的解决方案，但我希望可能存在一些可以调整元素大小的 jQuery 脚本?

有一次我想尝试访问浏览器缩放，但这似乎是不可能的。这是我对另一种方法的最后一次尝试。如果我不能让某些东西起作用......我将不得不把它吸干并将我所有的元素转换为百分比（真的应该有一个工具来为你做这件事！）。

感谢任何和所有帮助。谢谢！

edit* 这是一个描述网站简单结构的小提琴：http://jsfiddle.net/hkdeA/4/。我包含了一些代码来尝试扩展外部容器。如果所有内部容器都是 CSS 百分比，它会起作用，但我有 1000 个值要翻译，一个简单的脚本来调整所有元素的大小将节省大量时间、精力和精力。

  <div id="container">
    <div id="vid">

    </div>
    <div id="sidebar">

    </div>
    <div id="footer">

    </div>    
</div>

#container{
    background:grey;
    width:480px;
    height:270px;
    float:left;
}

#vid{
    background:black;
    width:320px;
    height:180px;
    float:left;
}

#sidebar{
    background:blue;
    width:160px;
    height:180px;
    float:right;
}

#foot{
    background:yellow;
    width:480px;
    height:90px;
    float:left;
}

最终目标：让我的网站应用调整为浏览器窗口的 100% 宽度或高度（取决于窗口的纵横比）。我知道可以使用 CSS 百分比和脚本来更改包含 div 的大小。但是，我想用脚本更改所有 div，以避免将我拥有的每个固定值转换为百分比的乏味。

Answer 1

试试这样的：

var list = [];
var containerW = $("#container").width();
var containerH = $("#container").height();
$("#container").find("*").each(function(){
  var obj = {};
  obj.w = $(this).width() * 100 / containerW;
  obj.h = $(this).height() * 100 / containerH;
  obj.el = $(this);
  list.push(obj);
});


for (var i in list) {
  var obj = list[i];
  obj.el.width(obj.w+'%');
  obj.el.height(obj.h+'%');
}


$("#container").width('100%');
// if you want height also to be 100%
$("#container").height('100%');

你可以在这里测试它：http://jsbin.com/izubed/1/edit

Answer 2

你在寻找这样的东西吗？

$('div').each(function(i,v){
  if($(v).width() > 0){
    $(v).width('auto');
  }
});