-1

特定の画面サイズで、DOM オブジェクトを別のオブジェクト内に移動したいと考えています。私はこの答えに触発されましたが、LESSで変更可能なレイアウトを使用しているため、トリガーとして使用したくないオブジェクトに固定幅を使用しています。軽量で、メディア クエリをエミュレートするには equire.js や modernizr のようなものが必要であり、私の目的に適しているため、気に入っています。

私は現在、1pxの下マージンを使用していますが、これに満足していないので、トリガーとして使用するために見つけることができる最も役に立たず、意味の少ないcssを探しています。css3 の "move-to" について聞いたことがありますが、まだ未完成のドラフトであり、どのブラウザーにも実装されていないようです。そして、私が正しければ、ブラウザはそれを読んでもいません。少なくともfirebugには表示されません。

これが私がすることです：

CSS

@media screen and (min-width: 768px) {

    .sidebar-secondary {
        margin-bottom: 1px;
    }

}

@media screen and (min-width: 992px) {

    .sidebar-secondary {
        margin-bottom: 0;
    }

}

js

var sidebar_move = function(){
    if ( $(".sidebar-secondary").css("margin-bottom") === "1px") {
        $(".sidebar-secondary").appendTo(".sidebar-primary");
    }
}

window.setInterval(sidebar_move, 1000);

「役に立たない」css値を使用できるかどうかはわかりません。誰も使わないもの。私は可能な限り競合のないことが好きで、他の人からのcssの変更がこれに干渉してはならないので、マージンはこれに対する非常に悪い解決策です.

そして、ほとんどの人が自分のコードを java-script で膨らませるべきだという意見を持っているように見えるので、その理由を知りたいです。

ところで、私がこれを正しく理解していれば、JavaScriptでウィンドウ幅を引っ張るよりも信頼性が高いと思います。これが、eqire.jsのような複雑なスクリプトが存在する理由ですか、それとも間違っていますか?

js を css に依存させることの何が悪いのでしょうか? 私はそれをこの特定のものに使用したいと思っています。

4

2 に答える 2

1

Enquire.jsを使用することをお勧めします: 役に立たない css ルールを使用せずに、役立つ可能性があります。

あなたの例は単に次のようになります。

enquire.register("screen and (min-width:768px)", {

    match : function() { 
        $(".sidebar-secondary").appendTo(".sidebar-primary"); 
    },

    unmatch : function() {
        /* e.g. remove .sidebar-secondary from .sidebar-primary */
    }
}).listen();

このアプローチは、CSS ルールに依存する JavaScript を使用するよりもクリーンだと思います。実際、あなたが提案したアプローチでは

  • アプリのメンテナンスが難しくなります (特定のルールを変更するだけで、ページの機能を壊す可能性のある人は誰でも)。
  • javascript と css は厳密に結びついていますが、適切なルールは css を javascript から遠ざけることです (逆も同様です)。
于 2013-01-28T15:53:40.907 に答える
0

私はあなたがやっていることのようなものを使ってきました（これは1年前のものですが、OPが望んでいた答えがないようです.これは私自身のGoogle検索がもたらした最初のリンクの1つでした.上）。

/*  Normal CSS  */
.mediaQueryTracker {
     width:auto;
}

/* Mobile Example */
@media only screen and (max-width: 479px) {
     .mediaQueryTracker {
          width:479px;
     }
}

JavaScriptに関しては：

var mobile_handler = function() {
    if ( $(".mediaQueryTracker").css("width") != "auto") {
        // Do stuff
    }
}

このクラスを非表示または非表示の空の div に割り当てるか、メイン コンテナまたはラップに HTML で mobileQueryTracker クラスを割り当てることができますが、値は現在のメディア クエリに応じて変化します。自動に設定されていないかどうかを確認することで、指定したサイズごとに、または「すべてをキャッチする」モバイル サイズに対して特定のことを行うことができます。

さらに単純に、「mobileQueryTracker」という名前をスキップして、コンテナーまたはラップの幅を使用することができます。

于 2014-09-15T16:03:33.673 に答える