Javascript 如何根据Shopify主题中的视口大小有条件地渲染DOM节点

我需要根据视口大小加载同一组件的单个HTML版本（可以是节或模板，具体视情况而定）：更具体，我在一个全新构建的Shopify主题中有几个组件，它在同一个

.liquid

文件中提供了移动和桌面HTML版本。不幸的是，我得到的草图差异太大，无法对它们进行一次编码，然后仅使用SCS更改它们的外观：我知道，从性能、安全性等角度来看，这是不好的。；但是我自己不能改变原来的设计。我发现的方法是可行的，但我担心这种行为的后果。我设置了不同的ID以避免冲突，并且使用了尽可能一致的相同类：我想知道是否有解决方案可以选择性地从DOM中删除两个版本中的一个。我之所以说“选择性”，是因为，如果用户更改了浏览器窗口的大小，它应该是静止的

我不是在写开源代码，我签署了保密协议，所以我不能在这里分享，但我至少可以在下面向你展示部分内容，以便更好地解释我的需求。基本上，我认为

remove（）

JavaScript方法可以做到这一点：问题是，一旦删除，DOM节点将永远消失，如果当前用户从移动设备移动到桌面视图或其他方式，我需要将其存储在某个位置

假设，在相同的

.liquid

文件中，我有：

…我设置了使用CSS媒体查询显示的内容。第一，如果视口宽度小于1024像素，则显示移动版本；如果视口宽度等于或大于1024像素，则显示桌面版本。好的，但是另一个的DOM节点仍然存在：它只是不会显示给用户。那么，实际上删除它，只加载正确的版本呢？当然，如果我使用

remove（）

方法，如果条件发生变化，排除的版本将不会返回。请注意，我没有也不能利用Shopify商店中的外部插件或应用程序来提供备用文件：我也不知道它们是否真的存在。我正在寻找一种方法来管理DOM中这两个版本之一的选择性加载。同样，它们包含无法导出到其他地方的液体变量，我没有后端访问它们的权限

最好有一种切换工具在视图之间切换，但是在DOM级别我不知道（但我会很高兴地发现）如果不使用JavaScript，液态条件就可以这样做，或者ES6+方法是否提供了迄今为止管理DOM节点的更好方法。我看到了很多关于React的问题，但尽管Shopify的Polaris利用了React，但我在这里就是做不到。我也不认为可以将每个变量存储在JavaScript变量中，然后加载更合适的变量，但我可能错了。谢谢你的耐心，很抱歉发了这么长的帖子