Удалить элемент для определенных размеров экрана

В настоящее время я создаю отзывчивый веб-дизайн, используя медиа-запросы. Для мобильных устройств я хочу удалить свой слайдер JS и заменить его чем-то другим. Я просмотрел .remove() и несколько других вещей из библиотеки JQuery, однако они должны быть внедрены в HTML, и я не могу думать о работе вокруг css-угла.

Ответ 1

Вам нужно удалить их или просто скрыть? Если просто скрывать все в порядке, то вы можете комбинировать медиа-запросы с display:none:

#mySlider{
    display: block;
}

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

Ответ 2

Вы можете скрыть элемент и показать другое в зависимости от размера экрана с помощью медиа-запроса из css, это из одного из моих живых проектов (я использую это для отображения/скрытия значка)

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

Ответ 3

Не 100% уверен, что вы имеете в виду. Но я создал класс "no-mobile", который я добавляю к элементам, которые не должны отображаться на мобильных устройствах. В запросе на мультимедиа я установил no-mobile для отображения: none;.

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

        .nomobile {
            display:none;
        }
}

Ответ 4

Вы также можете использовать функцию jquery addClass() и removeClass() или removeAttr() для достижения своей цели.

Пример:

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

        }
});

Или вы также можете использовать медиа-запрос следующим образом:

#mySlider{
    display: block;
}

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