Usuń element dla niektórych rozmiarów ekranów

Question

Obecnie tworzę responsywny projekt strony internetowej za pomocą zapytań o media. W przypadku urządzeń mobilnych chcę usunąć suwak JS i zastąpić go innym. Spojrzałem na .remove() i kilka innych rzeczy z biblioteki JQuery, jednak te muszą być zaimplementowane w HTML i nie mogę myśleć o pracy z punktu widzenia css.

Answer 1

Nie jest w 100% pewne, co masz na myśli. Ale stworzyłem klasę "no-mobile", którą dodaję do elementów, które nie powinny być pokazywane na urządzeniach mobilnych. W zapytaniu o media ustawiam opcję no-mobile do wyświetlenia: none ;.

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

     .nomobile { 
      display:none; 
     } 
} 

Answer 2

Czy chcesz je usunąć, czy po prostu je ukryć? Jeśli tylko ukrywanie jest w porządku, to można połączyć zapytań multimedialnych z display:none:

#mySlider{ 
    display: block; 
} 

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

Answer 3

Można również użyć funkcji jQuery addClass() i removeClass() lub removeAttr() spełnić swój cel.

Przykład:

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

     } 
}); 

Albo można też użyć zapytania mediów następująco:

#mySlider{ 
    display: block; 
} 

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

Answer 4

można ukryć element i pokazać inny w zależności od rozmiaru ekranu przy użyciu zapytania mediów z css, to jest z jednego z moich projektów na żywo (używam tego do pokazania/ukrywania ikony)

@media only screen and (max-width: 767px) and (min-width: 480px) 
{ 
    .icon-12{ display:none; } // 12 px 
    .icon-9{ display:inline-block; } // 9px 
}