0

语言：jQuery

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

我成功地改变了我的 DIV 的宽度和高度（但这不是我关心的问题，没关系，因为我将通过媒体查询更改字体 + 宽度和高度），我主要关心的是无法调整这些DIV 的顶部/左侧定位。

我快到了，但不知道如何使这项工作？

用户Chris Barr 玩了一会儿，但没能走得很远：

  • Chris Barr的jsFiddle： http: //jsfiddle.net/kjvSc/4/
    他所做的是成功并按比例重新定位/更改窗口调整大小时 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/

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

4

2 回答 2

1

就像@Jiskiras 说的那样，这将返回一个字符串像素值16px，您只想在其中获取数字16。

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

编辑：我试着弄乱你的小提琴，但我没有走得太远：http: //jsfiddle.net/kjvSc/4/

于 2012-12-13T05:16:19.087 回答
1

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

这是问题所在：

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

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

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

于 2012-12-13T04:44:06.670 回答