2

私は Web サイトを構築していますが、ウィンドウがフルスクリーン (または幅 > X px の任意のサイズ) の場合にサイドバーを表示するように動作させる必要があります。ユーザーがウィンドウの幅を一定以下にサイズ変更すると、サイドバーは非表示になります (display:none)。

注目すべき代表的な例は、Google のニュース ページ (news.google.com) です。ページの幅が特定のしきい値を超えている場合にのみ表示される右側のサイドバーがあります。

私は通常、google/stack exchange を検索して必要な答えを見つけるのが得意ですが、この場合は「動的」という言葉を使用しているせいかもしれませんが、それを表現する他の方法は思いつきません。私が必要としているものではない多くのヒットを取得しています。

私が自分で解決策を考えるとしたら、おそらく「表示可能領域」の x 値を常に監視する JavaScript リスナーを追加し、表示可能領域の X 値が低い場合、次のようなことを行う関数を常に実行します。私のしきい値よりも、sidbar div のスタイルを display:none に変更します。うまくいくと思いますが、これが最善の方法かどうかはわかりません。

ありがとうございました。

4

3 に答える 3

7

最大幅のメディアクエリはどうですか?

@media screen and ( max-width: 768px ) {
 /* When the viewport is 768px or less, 
    hide #sidebar */
    #sidebar {
        display: none;
    }
}

デモ: http://jsfiddle.net/jonathansampson/6Pvyt/show/

IE6-8 の場合、https://github.com/scottjehl/Respond

于 2012-05-30T20:57:05.403 に答える
1

ジョナサン・サンプソンがすでに回答しているように、CSS Media Queries が最良のソリューションだと思います。

しかし、JavaScriptリスナーの使用に関する質問でそれをほのめかしたように、jQueryのonイベントを使用したより良い（IMO）JSソリューションを説明するのが最善だと思いました。

例えば

jQuery(window).on({
    "resize": function(){
        if(jQuery(window).width() > 750) {
             //code to show sidebar
            jQuery(#sidebar).removeclass("hidden");
        } else {
            //code to hide sidebar e.g.
            jQuery(#sidebar).addclass("hidden");
        }
}
    };
});
于 2012-05-30T21:58:14.830 に答える
0

必要なのは CSS メディア クエリです。 http://www.w3.org/TR/css3-mediaqueries/

私は Twitter のブートストラップフレームワークを使用しています。このフレームワークには、多数のレスポンシブ スクリーン機能が含まれています。

于 2012-05-30T20:57:28.127 に答える