В настоящее время я создаю отзывчивый веб-дизайн, используя медиа-запросы. Для мобильных устройств я хочу удалить свой слайдер 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;
}
}