Javascript 需要根据屏幕宽度删除或隐藏div的帮助吗

因此，我在将768px（平板电脑/桌面）以外的任何屏幕上的3x3图像库布局更改为768px（移动）以外的任何屏幕上的图像滑块时遇到了麻烦

在所有人的帮助下，尤其是Danilo（评论中的解决方案），问题是css没有正确地定位屏幕，我只需要-@媒体屏幕，我还错过了一个DIV。。。（我知道没有错误）

因此，如果有人试图将引导4中显示的内容从桌面布局更改为移动布局，您可以使用CSS媒体查询，以包装的DIV为目标进行显示或不显示

更新了以下工作片段：

@仅媒体屏幕和（最小宽度：768px）{
.滑块{
显示：无；
}
.街区{
显示：块；
}
}
@仅介质屏幕和（最大宽度：768px）{
.滑块{
显示：块；
}
.街区{
显示：无；
}
}
.举行考试{
显示器：flex；
宽度：100%；
}
上校{
弹性：1；
}

想看更多我的作品吗
想看更多我的作品吗

既然您使用的是引导，请使用它。这不需要jQuery，因为已经完全涵盖了它

仅从md开始可见
仅在小屏幕上可见

您可以这样做，只需使用CSS即可

html

---

谢谢chris，但我刚刚试过，在mobile width上，它仍然显示3x3和幻灯片。然而，对于桌面，它现在也不显示。我有什么遗漏吗？那要看你在哪里加的课。你能用你尝试过的内容编辑你的问题吗？这样我们就可以检查@Calum1300Yeah。我试图在jquery中针对他们，但在发布之前忘记了删除#。Danilo的答案适用于手机宽度，但我仍然在桌面上显示这两个问题，你知道解决方法吗？我刚刚尝试了你提到的内容，并编辑了问题以显示。它适用于只显示幻灯片的手机，谢谢！但在桌面上，它仍然同时显示这两个内容。我试图复制css媒体查询并将目标更改为test1，但这会同时删除这两个内容…我已经编辑了我的解决方案。你想要那样的东西吗？你可以用手机上的@media queryeah任意播放visibity，幻灯片会显示，3x3会被删除，但现在桌面上都不会显示了哈哈。对于我头脑中如此简单的事情来说，这要困难得多。谢谢你迄今为止的帮助。你的CSS ir很好，但问题是HTML，我已经修复了你的代码片段

<div class="hold-tests">
    <div class="col test1">Test1</div>
    <div class="col test2">Test2</div>
    <div class="col test3">Test3</div>
</div>

@media only screen and (min-width: 768px) {
    .test1 {
        display: none;
    }
    .test3 {
        display: block;
    }
}
@media only screen and (max-width: 768px) {
    .test3 {
        display: none;
    }
}

.hold-tests {
    display: flex;
    width: 100%;
}

.col {
    flex: 1;
}