使iframe响应媒体查询

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