jQuery：在窗口调整大小时重新定位DIV（顶部和左侧属性）的绝对位置

语言：jQuery

我在一页上有一堆div。
我试图在每次调整窗口大小时更改它们的绝对位置（顶部/左侧属性）（使它们与视口成比例，同时保持其原始布局）

• jsFiddle:

我成功地更改了div的宽度和高度（但这不是我的问题，更不用说，因为我将通过媒体查询更改字体+宽度和高度），我主要担心的是无法调整这些div的上/左位置

我就快到了，但不知道该怎么做

用户，但无法走得很远：

• 的jsiddle:
  他所做的是成功地按比例重新定位/更改窗口大小调整上的div的上/左属性。但是，我注意到div最初并没有加载到它们的原始位置（按照样式中的指定）

下面是我正在使用的Javascript：

$（文档）.ready（函数（）{
//这获取容器的宽度
var cw=$（“#容器”）.width（）；
//这将获得原始字体大小
var fontSize=$（'.box'）.css（'font-size'）；
//这将获取DIV的原始绝对位置
var left=$（'.box'）.css（'left'）；
$（“.box”）。宽度（cw/5）。高度（cw/5）；
$（'.box'）.css（“字体大小”，fontSize/5+“px”）；
$（'.box'）.css（“左”，左/5+“px”）；
$（窗口）。调整大小（函数（）{
//这获取容器的宽度
var cw=$（“#容器”）.width（）；
//这将获得原始字体大小
var fontSize=$（'.box'）.css（'font-size'）；
//这将获取DIV的原始绝对位置
var left=$（'.box'）.css（'left'）；
$（“.box”）。宽度（cw/5）。高度（cw/5）；
$（'.box'）.css（“字体大小”，fontSize/5+“px”）；
$（'.box'）.css（“左”，左/5+“px”）；
});
});​

您可以在这里查看它的实际操作-jsFiddle:

---

任何帮助和指导都将不胜感激

这就是我能想到的：

问题是：

$('.box').css('font-size');

上面的返回值为16px。你不能把16px除以2。您必须将16除以2，然后附加px

---

我建议您在CSS中使用媒体查询，而不是使用jQuery。这样，您的jQuery将以高度/宽度进行更新，并且根据设置的内容，您的媒体查询将启动并更新字体大小。

就像@Jiskiras所说的那样，这将返回一个字符串像素值

16px

，您只想从中获取数字

16

因此，简单的答案是这样做：

parseInt（$（'.box'）.css（'font-size'））

编辑：我试着摆弄一下你的小提琴，但没走多远：
你好，谢谢你的解释。我想用百分比来表示字体大小，但我也不知道怎么做。您的示例在将窗口大小调整为较小大小时起作用，但在将窗口重新调整为其原始大小后，不会将字体大小调整回原来的大小。我希望找到解决这个问题的办法。谢谢您的时间。我现在更新了我的问题@Jiskiras，我决定使用CSS3媒体查询调整元素的字体大小和宽度/高度属性。现在我唯一关心的是如何在使用jQuery调整窗口大小时更改这些div的上/左属性。我已经更新了JSFIDLE:。我确实使用了Chris Barr的JSFIDLE中的行作为左代码：new_left=（container/$（'.box'）。length*I+1）+new_width；感谢新的jsFiddle@Jiskiras！它在调整窗口大小时起作用，但我对它在初始加载时的行为有点困惑。div没有根据CSS中指定的上/左属性来定位自己，这是我唯一的问题。如果有一种方法可以让他们一开始就遵循CSS中的设置，然后根据窗口大小改变他们的位置，这将非常好。但是现在，他们没有遵循CSS中的设置。o、 我没有意识到这是我想要的。下面是删除该功能的更新JSFIDLE:。之所以这样做，是因为我在document ready函数中使用了触发器（“resize”），并在开始时调用了resize函数。谢谢@Chris Barr，我看到你几乎成功了。你似乎已经得到了调整好的绝对位置，我的问题在于字体大小现在。如何使他们的比例与他们的父母div，非常感谢您的时间！我将注意您可能进行的任何编辑。另外，我在您的JSFIDLE中注意到，div最初并没有加载到其原始绝对位置。我不知道为什么不能，但我想指出这一点。我现在更新了我的问题，@Chris Barr，我决定改为使用CSS3媒体查询来调整元素的字体大小和宽度/高度属性。现在我唯一关心的是如何在使用jQuery调整窗口大小时更改这些div的上/左属性。我想使用您的代码，但我不确定为什么它最初不以元素的原始绝对位置显示元素。但我可以看到，您已经完成了在调整窗口大小时按比例调整/重新定位它们。