Question

语言： jQuery

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

jsFiddle： http://jsfiddle.net/kjvSc/1/

我成功地改变了宽度和宽度。我的DIV的高度（但这不是我的顾虑，更不用说了，因为我要通过媒体查询改变字体+宽度和高度），我主要担心的是无法调整这些DIV的上/下定位。

我几乎在那里，但无法弄清楚如何使这项工作？

用户 Chris Barr played with this for a bit，但未能走得太远：

Chris Barr 的 jsFiddle： http://jsfiddle.net/kjvSc/4/
他所做的是成功的＆amp;在窗口调整大小时按比例重新定位/更改DIV的顶部/左侧属性。然而，我注意到DIV最初并没有加载到它们原来的位置（按照它们的风格指定）。

以下是我正在使用的Javascript：

$(document).ready(function() {
    // THIS GETS WIDTH OF CONTAINER
    var cw = $('#container').width();
    // THIS GETS ORIGINAL FONT SIZE
    var fontSize = $('.box').css('font-size');
    // THIS GETS ORIGINAL ABSOLUTE POSITION OF DIV
    var left = $('.box').css('left');

    $(".box").width(cw / 5).height(cw / 5);
    $('.box').css("font-size", fontSize / 5 + "px");
    $('.box').css("left", left / 5 + "px");

    $(window).resize(function() {
    // THIS GETS WIDTH OF CONTAINER
    var cw = $('#container').width();
    // THIS GETS ORIGINAL FONT SIZE
    var fontSize = $('.box').css('font-size');
    // THIS GETS ORIGINAL ABSOLUTE POSITION OF DIV
    var left = $('.box').css('left');

    $(".box").width(cw / 5).height(cw / 5);
    $('.box').css("font-size", fontSize / 5 + "px");
    $('.box').css("left", left / 5 + "px");
    });
});

你可以在这里查看它 - jsFiddle： http://jsfiddle.net/kjvSc/1/

任何帮助＆amp;非常感谢指导！

Answer 1

这是我能够提出的：http://jsfiddle.net/kjvSc/3/

问题在于：

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

以上返回16px。你不能将16px除以2.你必须将16除以2，然后加上px。

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

Answer 2

就像@Jiskiras所说的那样，它会返回一个字符串像素值16px，而你只想取出数字16。

所以，简短的回答就是这样做：parseInt($('.box').css('font-size'));

编辑：我尝试了一下你的小提琴，但我没有走得太远：http://jsfiddle.net/kjvSc/4/

jQuery：在WINDOW RESIZE上重新定位DIV的绝对位置（顶部和左侧属性）

2 个答案: