web-dev-qa-db-fra.com

Supprimer l'élément pour certaines tailles d'écran

Je crée actuellement une conception Web réactive utilisant des requêtes multimédia. Pour les appareils mobiles, je souhaite supprimer mon curseur JS et le remplacer par quelque chose d'autre. J'ai examiné .remove() et quelques autres éléments de la bibliothèque JQuery, mais ceux-ci doivent être implémentés dans le code HTML et je ne peux pas penser à une solution de contournement à partir de l'angle CSS.

htmlcsshtml5media-queries
13
sam_7_h

Avez-vous besoin de les supprimer ou simplement de les cacher? Si le simple fait de cacher est correct, vous pouvez combiner des requêtes de média avec display:none:

#mySlider{
    display: block;
}

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

Vous pouvez masquer un élément et en afficher un autre en fonction de la taille de l'écran à l'aide de la requête multimédia de css; elle provient d'un de mes projets en direct (je l'utilise pour afficher/masquer l'icône).

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

Pas à 100% sûr de ce que vous voulez dire. Mais j'ai créé une classe "no-mobile" que j'ajoute aux éléments qui ne doivent pas être affichés sur les appareils mobiles. Dans la requête média, je définissais alors no-mobile pour afficher: none ;. 

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

        .nomobile {
            display:none;
        }
}
2
user2515479

Vous pouvez également utiliser la fonction jquery addClass () et removeClass () ou removeAttr() pour remplir votre fonction.

Exemple:

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

        }
});

Ou vous pouvez également utiliser la requête multimédia comme suit:

#mySlider{
    display: block;
}

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