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

これは私が思いついたものです: http://jsfiddle.net/kjvSc/3/

問題は次のとおりです。

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

上記は 16px を返します。16px を 2 で割ることはできません。16 を 2 で割ってから、px を追加する必要があります。

jQuery でこれを行う代わりに、CSS でメディア クエリを使用することをお勧めします。そうすれば、jQuery は高さ/幅で更新され、設定に応じて、メディア クエリが開始され、フォント サイズが更新されます。

于 2012-12-13T04:44:06.670 に答える
1

@Jskirasが言うように、代わり16pxに数値を取得したい場所の文字列ピクセル値を返します16。

したがって、短い答えはこれを行うことです：parseInt($('.box').css('font-size'));

編集：あなたのフィドルを少しいじってみましたが、あまりうまくいきませんでした：http://jsfiddle.net/kjvSc/4/

于 2012-12-13T05:16:19.087 に答える