特定の画面サイズの要素を削除します。

Question

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

Answer 1

あなたが何を意味するかわからない。しかし、モバイルデバイスに表示すべきではない要素に追加するクラス「no-mobile」を作成しました。メディアクエリでは、no-mobileをdisplay：none;に設定します。

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

     .nomobile { 
      display:none; 
     } 
} 

Answer 2

削除するか、非表示にする必要はありますか？ちょうど隠れては大丈夫である場合は、display:noneでメディアクエリを組み合わせることができます：

#mySlider{ 
    display: block; 
} 

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

Answer 3

また、あなたの目的を達成するためにjqueryの関数にaddClass（）とremoveClass（）またはremoveAttr()を使用することができます。

例：

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

     } 
}); 

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

#mySlider{ 
    display: block; 
} 

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

Answer 4

あなたは要素を隠し、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 
}