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

Je suis en train de créer un site web réactif en utilisant les media queries. Pour les appareils mobiles, je veux supprimer mon JS curseur et la remplacer par autre chose. J'ai regardé .remove() et de quelques autres choses à partir de la bibliothèque JQuery, cependant ceux-ci doivent être mis en œuvre dans le code HTML et je ne peux pas penser à un travail autour de la css angle.

Vous pouvez masquer un élément et un autre en fonction de la taille de l'écran à l'aide de requêtes de média à partir de css.

OriginalL'auteur sam_7_h | 2013-07-20

  1. 26

    Avez-vous besoin de supprimer, ou tout simplement les cacher? Si seulement le masquage est ok, alors vous pouvez combiner des requêtes de média avec display:none:

    #mySlider{
    display: block;
}

@media (max-width: 640px) 
{
    #mySlider
    {
        display: none;
    }
}
    Dépend de la clandestinité, il serait toujours charger le curseur et les images que l'une des raisons de changer le curseur autrement qu'en raison de la taille de celui-ci est de créer un poids plus léger élément mobile plus rapide temps de chargement.
    Il se charge si vous êtes à la cacher.

    OriginalL'auteur Daniel Gimenez

  2. 6

    Vous pouvez masquer un élément et un autre en fonction de la taille de l'écran à l'aide de requêtes de média à partir de css , c'est à partir de l'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
}

    OriginalL'auteur The Alpha

  3. 2

    Pas à 100% sûr de ce que tu veux dire. Mais j'ai créé une classe "sans mobile" que j'ajoute à des éléments qui ne doivent pas être montrés sur les appareils mobiles. Dans la requête de média je puis mettre en no-mobile display: none;. 

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

        .nomobile {
            display:none;
        }
}

    OriginalL'auteur user2515479

  4. 1

    Vous pouvez également utiliser la fonction jquery addClass() et removeClass() ou removeAttr() à accomplir votre but.

    Exemple:

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

        }
});

    Ou vous pouvez également utiliser les médias de la requête comme suit :

    #mySlider{
    display: block;
}

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

    OriginalL'auteur Butani Vijay