Javascript 不使用iFrame预览响应性web组件

我正在尝试为我的web组件构建一个小型预览器。我的页面上的所有内容都使用媒体查询进行响应，我正在尝试构建一个小容器，在其中预览页面的一小部分。就在这个容器的上方，我放置了不同屏幕宽度的开关。当我单击其中一个开关时，我的容器会相应地调整大小，其中的内容会根据媒体查询触发的内容显示

我发现如何做到这一点的唯一方法是使用Iframes。它可以工作——但总是需要将内容放在单独的文件中，才能链接到iframe的src中，这是一个麻烦。此外，还有一些问题需要将iframe高度设置为内容所需的任何值

目前：

<a href="javascript:$('.preview1').attr('width', '320')">320px</a> <!-- etc... -->
<div class="container">
    <iframe class="preview1" src="component1.html" seamless></iframe>
</div>

---

是否有可能使用javascript在我的容器上触发不同的媒体查询？模拟屏幕大小调整？

你知道吗？它正是这样做的。不，我还没有看到那个——它基本上和我上面的iframe解决方案一样。谢谢你的灵感！然而，它仍然是通过使用iframe来解决的。也许它是用一种聪明的技术解决的，使用javascript在html中复制而不必使用src文件？