jQuery的：在窗口重新定位DIV的絕對位置（上和左屬性）調整

語言：jQuery的jQuery的：在窗口重新定位DIV的絕對位置（上和左屬性）調整

我有一個頁面上一堆資料覈實的。
我試圖改變每個調整窗口大小（以使其正比於視，同時保持其原有佈局）一次他們絕對位置（上/左屬性）。

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

我成功地改變了我的DIV 的寬度&高度（但這不是我關心的，從來不介意，因爲我要改變字體+ width & height via Media Queries），我主要關心的是無法調整這些DIV的頂部/左側定位。

我幾乎在那裏，但無法弄清楚如何使這項工作？

用戶Chris Barrplayed with this for a bit，但沒能走得很遠：

Chris Barr的的jsfiddle：http://jsfiddle.net/kjvSc/4/
他的所作所爲是成功&按比例重新定位/改變的DIV 'top/left窗口調整大小的屬性。然而，我注意到，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/

任何幫助&指導，將不勝感激！

來源

2012-12-13 Mafia

這是我能想出：http://jsfiddle.net/kjvSc/3/

這裏的問題：

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

以上的回報16px的。您不能將16px除以2.您必須將16除以2，然後再追加px。

而不是試圖用jQuery做到這一點，我建議你在CSS中使用媒體查詢。這樣，你的jQuery的高度/寬度更新，並根據它們的設置，你的媒體查詢啓動並更新字體大小。

來源

2012-12-13 04:44:06 Jiskiras

您好，感謝那明確的解釋。我正在考慮使用字體大小的百分比，但我不知道如何做到這一點。您可以在將窗口大小調整爲較小尺寸時使用示例，但在窗口重新調整爲原始大小後不會調整字體大小。我希望找到解決辦法。感謝您的時間。 – Mafia

我已經更新了我的問題，@Jiskiras，我決定使用CSS3媒體查詢來調整元素的字體大小和寬度/高度屬性。現在我唯一擔心的是如何使用jQuery在窗口大小調整上更改這些DIV的頂部/左側屬性。 – Mafia

這應該很容易。我更新了jsfiddle：http://jsfiddle.net/kjvSc/8/。我確實使用了Chris Barr的jsfiddle中的左邊代碼：new_left =（container/$（'.box'）。length * i + 1）+ new_width; – Jiskiras

就像@Jiskiras說的那樣，它將返回一個字符串像素值16px，您只需要取出16即可。

所以，簡單的答案是這樣：parseInt($('.box').css('font-size'));

編輯：我想與你撥弄了一下搞亂，但是我沒有走得很遠：有http://jsfiddle.net/kjvSc/4/

來源

2012-12-13 05:16:19

謝謝@Chris Barr，我看到你幾乎擁有了它。你似乎已經獲得了絕對位置來調整好，現在我的問題在於字體大小。如何讓他們與他們的母公司相稱，非常感謝您的時間！我會留意任何可能的編輯 – Mafia

另外，我注意到在你的jsFiddle中，DIVs最初並沒有裝入原來的絕對位置。我不確定爲什麼不，但我想指出。 – Mafia

我已經更新了我的問題，@Chris Barr，我已決定使用CSS3媒體查詢來調整元素的字體大小和寬度/高度屬性。現在我唯一擔心的是如何使用jQuery在窗口大小調整上更改這些DIV的**頂部/左側屬性**。我想使用你的代碼，但我很不確定它爲什麼最初不會在原始絕對位置顯示元素。但是我可以看到你已經完成了在窗口大小調整上的比例調整/重定位。 – Mafia

jQuery的：在窗口重新定位DIV的絕對位置（上和左屬性）調整

回答

相關問題