1

グリッドシステムを使用する開発中のサイトがあります。IE7では、ウィンドウのサイズが変更されると、一方の列がもう一方の列の下に「ポップ」します。これは大きな問題ではありませんが、左上に余白がないため、レイアウトはかなり読みにくくなっています。

では、どうすればクラスをに適用できますか

<div>

ウィンドウ（ビューポート？）が特定の幅未満にサイズ変更された場合のみ？

例えば

width > 500px = class="smallerwindow"

次に、そのクラスを適切にスタイル設定できます。

私はjQuery、modernizrなどを持っています。

ありがとう、

ハーレー

4

3 に答える 3

2

上記の私のコメントによると、 respond.jsを使用して、IE6-8のメディアクエリサポートを有効にすることができます。

条件付きでrespond.jsスクリプトを含めます。

<!--[if lte IE 8]>
<script type="text/javascript" src="~/Scripts/respond.min.js"></script>
<![endif]-->

注：domレンダリングに影響を与えるため、respond.jsをヘッドに含めることをお勧めします

次に、CSSを次のように定義します。

.myWindow { width: 500px; }

@media (min-width:1200px) {
    .myWindow { width: 400px; }
}

@media  (min-width: 768px) and (max-width:979px) {
    .myWindow { width: 300px; }
}

ビューポートのサイズと幅のサンプル。それに応じて微調整します。

于 2012-10-30T14:49:39.127 に答える
1

私はこのようなことをします。

$(window).resize(function() {

    if((window).width() > 500 && !$("div").hasClass("smallerwindow")){

        $("div").addClass("smallerwindow");

    } else if((window).width() < 500 && $("div").hasClass("smallerwindow")) {

        $("div").removeClass("smallerwindow");

    }

});

ウィンドウサイズが500より大きいかどうかを確認し、divにクラスが追加されていない場合、ウィンドウサイズが500未満で、divにクラスが削除されている場合。

于 2012-10-30T14:48:07.250 に答える
0

jQuery：

if ($(window).width() > 500) {
   $("#myDiv").attr("class","smallerWindow");
}

これにより、ビューポートの幅がチェックされ、現在の「クラス」属性がリセットされます。

<div id='myDiv'> </div>
于 2012-10-30T14:47:49.900 に答える