使iframe响应媒体查询

是通过在iframe标签中添加媒体查询规则，使其能够根据不同的设备或屏幕尺寸自动调整显示内容的技术。

具体实现方法如下：

在iframe标签中添加媒体查询规则，可以使用CSS的@media规则来实现。例如：

<iframe src="your_page.html" style="width:100%; height:500px;">
  <style>
    @media screen and (max-width: 768px) {
      iframe {
        width: 100%;
        height: 300px;
      }
    }
  </style>
</iframe>

上述代码中，媒体查询规则指定了当屏幕宽度小于等于768px时，iframe的宽度为100%，高度为300px。

使用JavaScript动态设置iframe的样式。可以通过监听窗口大小变化事件，根据当前窗口大小动态设置iframe的样式。例如：

<iframe id="myFrame" src="your_page.html" style="width:100%; height:500px;"></iframe>

<script>
  window.addEventListener('resize', function() {
    var frame = document.getElementById('myFrame');
    if (window.innerWidth <= 768) {
      frame.style.width = '100%';
      frame.style.height = '300px';
    } else {
      frame.style.width = '100%';
      frame.style.height = '500px';
    }
  });
</script>

上述代码中，通过监听窗口大小变化事件，当窗口宽度小于等于768px时，动态设置iframe的宽度为100%，高度为300px；否则，设置宽度为100%，高度为500px。

应用场景：