jQuery 调整 CSS 元素的大小

Question

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

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

有一次我想尝试访问浏览器缩放功能，但这似乎不可能。这是我对另一种方法的最后一次尝试。如果我不能让某些东西发挥作用...我将不得不接受它并将我所有的元素转化为百分比(真的应该有一个工具可以为你做这件事!)。

感谢任何帮助。谢谢!

编辑* 这是一个描述网站简单结构的 fiddle :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