Javascript：检查屏幕宽度并删除HTML元素

我有一个页面，有2个滑块；1个用于移动设备和平板电脑（屏幕宽度小于500px），1个用于台式机（屏幕宽度大于500px）。我使用CSS（display:block，display:none）属性来相应地显示它们，但是，浏览器正在下载两个滑块的图像。我需要一个Javascript代码，可以

• 确定屏幕宽度
• 如果屏幕宽度小于或等于500px，请按CSS类删除桌面滑块div
• 如果屏幕宽度大于500px，请按CSS类删除移动滑块div

我无法使用JQuery，因为我们在图书馆和网站设计方面存在一些问题（说来话长）

下面是HTML元素

<div class="show-desktop">
        [rev_slider alias="slider"][/rev_slider]
    </div>

    <div class="show-mobile">
        [rev_slider alias="slider-mobile"][/rev_slider]
    </div>

[rev_slider alias=“slider”][/rev_slider]
[rev_slider alias=“slider mobile”][/rev_slider]

查看此代码片段：

试验
.展示手机{
显示：无；
}
@仅介质屏幕和（最大宽度：500px）{
.显示桌面{
显示：无；
}
.展示手机{
显示：块；
}
}
const vw=Math.max（document.documentElement.clientWidth | | | 0，window.innerWidth | | 0）；
const vh=Math.max（document.documentElement.clientHeight | | | 0，window.innerHeight | | 0）；
如果（vw>500）{
书面文件（“”）；
document.writeln（'\t[rev_slider alias=“slider”][/rev_slider]”）；
}否则{
书面文件（“”）；
document.writeln（'\t[rev_slider alias=“slider mobile”][/rev_slider]”）；
}

您需要两个滑块的具体原因是什么？做你需要的，js freeHey，你需要自己尝试一些代码，然后带着疑问或错误回来。在编写代码时，即使是一点点努力也会大有帮助。请试一试。嗨，我试过了，但是发布我失败的尝试是没有意义的。我宁愿用简洁的方式问一个问题，你需要使用类似于

srcset

的东西。它可以为不同的屏幕分辨率指定不同的图像。查看文档了解更多详细信息，这种方法不需要Javascript。谢谢。我目前正在使用这种方法，但是，所有的图像仍在通过浏览器下载。我需要删除html元素，这样浏览器就不会下载这两个幻灯片的图像。您可以显示更多的代码吗？图像放置在哪里？我确信会有多个图像需要管理。需要查看管理所有这些文件的代码。因此，这里有一个url-。如果使用inspect工具，您将能够在名为“slotholder”的div中找到图像。这是一个自动类，因为“Revolution Slider”是第三方插件。如果您查看我上面的初始问题，则短代码会将第三方滑块代码拉入页面。我创建了两个滑块，这样我就可以从移动图像中分割桌面。Revolution slider确实提供了与移动设备相关的选项，但所有图像仍由浏览器下载，这使得这些选项毫无用处。您必须使用脚本检测视图端口大小并相应地编写HTML。我直接在文件上写。我们还可以采用更模块化的方法，为桌面和移动设备分别加载文件，并根据视图端口大小从中加载内容。无论如何，如果我们想根据视图端口大小加载图像，那么脚本的使用是不可避免的。