3

メディア条件に関連付けられた CSS ルールを動的に追加したいとします。たとえば、次のようなものです。

@media only screen and (min-device-width : 500px){
    .someClass: {
        color: blue;
    }
}

論理的な手順は、JavaScript を使用してメディア クエリの有効性を確認し、テストに合格した場合にルールを挿入することです。次のようなもの：

if(matchMedia(only screen and (min-device-width : 500px))){
    $('.someClass').css('color', 'blue');
}

欠点は、ルールが応答しないことです。画面サイズを変更しても、それに応じて青色が変化しません。画面サイズの変更にリスナーを追加できますが、少しやり過ぎだと思います。

私の質問は、 Javascript または JQuery を介してレスポンシブルールを追加する方法はありますか?

4

2 に答える 2

4

enquire.jsについて知りたい場合:

enquire.register("screen and (max-width:1000px)", {

    match : function() {},      // REQUIRED
                                // Triggered when the media query transitions 
                                // *from an unmatched state to a matched state*

    unmatch : function() {},    // OPTIONAL
                                // If supplied, triggered when the media query transitions 
                                // *from a matched state to an unmatched state*.

    setup : function() {},      // OPTIONAL
                                // If supplied, a one-time setup function 
                                // triggered when the handler is first registered.                           

    deferSetup : true,          // OPTIONAL, defaults to false
                                // If set to true, defers execution the setup function until
                                // the media query is first matched. Setup is still triggered just once.

    destroy : function() {}     //OPTIONAL
                                // If supplied, triggered when a hander is unregistered (covered later). 
                                // Enables you to provide lifecycle to responsive widgets. 
                                // Put cleanup logic here.

}).listen(); // More on this next

[ドキュメントから]

編集: [リスナーに依存せずに] js を介して純粋な CSS ルールを追加したい場合、それは不可能だと思います。

于 2013-02-08T10:54:08.287 に答える
1

Respond.js ライブラリを使用して動的 CSS をレンダリングできます。クライアント側でネイティブ css としてレンダリングされるレスポンシブ ルールを動的に定義するのに役立ちます。流暢なインターフェイス プログラミング スタイルを使用し、メディア クエリがサポートされていない場合にも機能します (現在の有効なルールを動的にレンダリングします)。

たとえば、 width プロパティを次のように定義できます。

r$.breakpoints(320,767,1280);
r$.set('width','px').values(100,300,1500).linearInt().applyTo('.class');

詳細、ダウンロード、および例:

http://www.responsivejs.com

于 2013-03-09T07:50:43.660 に答える