web-dev-qa-db-ja.com

特定の画面サイズの要素を削除する

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

htmlcsshtml5media-queries
14
sam_7_h

それらを削除する必要がありますか、それとも非表示にするだけですか？隠すだけでよい場合は、メディアクエリとdisplay:none：

#mySlider{
    display: block;
}

@media (max-width: 640px) 
{
    #mySlider
    {
        display: none;
    }
}
27
Daniel Gimenez

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
}
8
The Alpha

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

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

        .nomobile {
            display:none;
        }
}
3
user2515479

Jquery関数addClass（）およびremoveClass（）またはremoveAttr()を使用して目的を達成することもできます。

例：

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

        }
});

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

#mySlider{
    display: block;
}

@media (max-width: 500px) 
{
    #mySlider
    {
        display: none;
    }
}
1
Butani Vijay