Web コンポーネント用の小さなプレビューアを構築しようとしています。ページのすべてがメディア クエリを使用してレスポンシブになり、ページの小さな断片をプレビューする小さなコンテナーを構築しようとしています。このコンテナのすぐ上に、さまざまな画面幅のトグルを配置しています。トグルの 1 つをクリックすると、それに応じてコンテナーのサイズが変更され、メディア クエリがトリガーする内容に従って内部のコンテンツが表示されます。
これを行う方法を見つけた唯一の方法は、iframe を使用することでした。それは機能しますが、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を使用して、コンテナで別のメディアクエリをトリガーする方法はありますか? 画面のサイズ変更をエミュレートしていますか?