删除某些屏幕尺寸的元素

Question

我目前正在使用媒体查询创建响应式网页设计.对于移动设备,我想删除我的JS滑块并将其替换为其他东西.我已经查看.remove()了JQuery库中的一些其他内容,但是这些必须在HTML中实现,我无法从css角度考虑解决方法.

Answer 1

你需要删除它们,还是只是隐藏它们？如果只是隐藏是可以的,那么你可以将媒体查询与display:none:

#mySlider{
    display: block;
}

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

Answer 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
}

Answer 3

不是 100% 确定你的意思。但我创建了一个“no-mobile”类，将其添加到不应在移动设备上显示的元素中。然后，在媒体查询中，我将 no-mobile 设置为 display: none;。

@media screen and (max-width: 480px) {
   .nomobile {
      display:none;
   }
}