17

現在、メディアクエリを使用してレスポンシブ Web デザインを作成しています。モバイル デバイスの場合、JS スライダーを削除して別のものに置き換えたいと考えています。私は.remove()JQueryライブラリから他のいくつかのものを見てきましたが、これらはHTMLに実装する必要があり、cssの角度からの回避策は考えられません.

4

4 に答える 4

35

それらを削除する必要がありますか、それとも単に非表示にする必要がありますか? display:none非表示にするだけでよい場合は、メディア クエリを次のように組み合わせることができます。

#mySlider{
    display: block;
}

@media (max-width: 640px) 
{
    #mySlider
    {
        display: none;
    }
}
于 2013-07-20T12:42:53.503 に答える
9

からのメディアクエリを使用して、画面サイズに応じて要素を非表示にして別の要素を表示できますcss。これは私のライブプロジェクトの1つです（これを使用してアイコンを表示/非表示にします）

@media only screen and (max-width: 767px) and (min-width: 480px)
{
    .icon-12{ display:none; } // 12 px
    .icon-9{ display:inline-block; }  // 9px
}
于 2013-07-20T12:45:42.673 に答える
4

あなたが何を意味するのか100％確信が持てません。しかし、モバイル デバイスに表示してはならない要素に追加するクラス「no-mobile」を作成しました。次に、メディア クエリで no-mobile を display: none; に設定します。

@media screen and (max-width: 480px) {

        .nomobile {
            display:none;
        }
}
于 2013-07-20T12:42:40.047 に答える
1

jquery 関数addClass()およびremoveClass()を使用するかremoveAttr()、目的を達成することもできます。

例：

$(window).resize(function(){
        if(window.innerWidth < 500) {
            $("#slider").removeAttr("style");

        }
});

または、次のようにメディア クエリを使用することもできます。

#mySlider{
    display: block;
}

@media (max-width: 500px) 
{
    #mySlider
    {
        display: none;
    }
}
于 2013-07-20T12:45:13.483 に答える