我正在尝试为我的网络组件构建一个小预览器。我的页面上的所有内容都是使用媒体查询响应，我正在尝试构建一个小容器，我在其中预览我的页面的一小部分。就在这个容器的上方，我正在进行不同屏幕宽度的切换。当我单击其中一个切换时，我的容器会相应地调整大小，并根据媒体查询触发的内容显示内部内容。
我发现如何做到这一点的唯一方法是使用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在我的容器上触发不同的媒体查询？模拟屏幕大小调整？