0

正方形を使ってページを作成しました。正方形を組み合わせて特定の単語を作成します。しかし、ウィンドウのサイズを変更すると、正方形が無計画にその場所を混乱させます。ウィンドウのサイズ変更時に正方形が元の位置を維持するように、CSSまたはを変更するにはどうすればよいですか？javascript

次のページを表示できます：http：//www.tryst-iitd.com/13/beta

サイズ変更を処理するために次のコードを含めましたが、それでも問題は未解決のままです。

<script type="text/javascript">
$(function () {
    var screenWidth = $(window).width() + "px";
    var screenHeight = $(window).height() + "px";
    $("#container").css({
        width: screenWidth,
        height:screenHeight,
    });
    $(window).resize( function () {
        var screenWidth = $(window).width() + "px";
        var screenHeight = $(window).height() + "px";
        $("#container").css({
            width: screenWidth,
            height:screenHeight,
        });
    });
});
</script>
4

3 に答える 3

0

ウィンドウのサイズを変更するたびにコンテナの幅が自動的に調整されるため、正方形が崩れます。修正値を設定するか、正方形の最小幅を設定すると、コンテナで問題が修正されます。正方形の幅は％です。

また、ボディタグの幅に応じてdiv（id = container）が調整されるため、ウィンドウサイズ変更イベント自体は役に立ちません。

于 2013-01-12T14:42:21.543 に答える
0

あなたの問題は、CSS マージンが固定幅であるため、正方形の幅が % であっても、マージンがこの問題を引き起こすことです。例として、 css クラスを無効にしてみwrap1てください。デザインの応答性が大幅に向上することがわかります。wrapalphabet

期待する結果を得るには、おそらくマージン/パディングの扱い方を再考する必要があります。

于 2013-01-12T15:36:26.510 に答える
0

正方形の位置とサイズをパーセンテージで設定すると、サイズ変更コードが正常に機能します。

また、min-width/ min-heightCSS プロパティを設定すると、正方形が小さすぎるのを防ぐことができます。

于 2013-01-12T15:17:40.603 に答える