iframe移动端布局

在移动端布局中，可以使用CSS媒体查询来为不同的屏幕尺寸设置不同的样式。以下是一个示例：

<style>
    .iframe-wrapper {
        width: 100%; /* 设置iframe容器的宽度为100% */
        height: 0; /* 设置iframe容器的高度为0，将在媒体查询中设置 */
        padding-bottom: 56.25%; /* 设置iframe容器的高度为宽度的16:9比例 */
        position: relative; /* 设置iframe容器的定位为相对定位，让其内部元素可以进行绝对定位 */
    }

    iframe {
        position: absolute; /* 设置iframe元素的定位为绝对定位，让其填充整个容器 */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* 媒体查询：当屏幕宽度小于等于768px时，设置iframe容器的高度为200px */
    @media (max-width: 768px) {
        .iframe-wrapper {
            height: 200px;
        }
    }
</style>

<div class="iframe-wrapper">
    <iframe src="https://example.com"></iframe>
</div>

在上面的示例中，我们首先将iframe容器的宽度设置为100%，高度设置为0，并使用padding-bottom属性来设置其高度为宽度的16:9比例。然后，我们将iframe元素的定位设置为绝对定位，让其填充整个容器。

最后，我们使用媒体查询，当屏幕宽度小于等于768px时，将iframe容器的高度设置为200px。这样，在移动设备上查看页面时，iframe元素将以适当的尺寸显示在容器中。