javascript - 有没有办法让 iframe 嵌入响应更快？

Question

所以我对前端开发有点陌生，并通过反复试验自己学习它，但似乎我最近遇到了死胡同。我试图并排放置两个谷歌嵌入（谷歌地图和表单），但这只会导致两者之间的纵横比尴尬。我的问题是如何对齐嵌入在容器中的两个 iframe（Google 地图和表单），以便它们在桌面上并在移动设备上垂直显示时并排显示，同时保持舒适的纵横比（响应宽度和高度）给用户？

这是我到目前为止所拥有的：

这是我想要的外观： 在桌面上并排嵌入带有联系表和谷歌地图的联系页面，在移动设备上垂直对齐

标签： javascripthtmlcssiframeresponsive

Answer 1

您需要使用“css 媒体查询”来根据屏幕大小重新定位 html 页面中的项目。

我在这里做了一个例子，请随时将此代码复制粘贴到您的项目中:)。

我可以看到您是这里的新开发人员，我希望您下次注意，如果您可以复制代码并将其粘贴到 stackoverflow 中而不是截屏，这将使人们的工作更轻松。

（当您按下展开片段并调整大小以适合浏览器大小时，下面的片段效果更好）

<style>
    .container{
        display: flex;   /*Set div as flexbox to override default margins*/
    }
    iframe{/*Perform to all iframes*/
        width: 50%;
        margin: 10px;
    }
    @media only screen and (max-width: 900px) {/*When screen size is below 900px*/
        .container{/*Make the form and map stack over each other*/
            flex-direction: column;
            /*flex-direction: column-reverse;*//* If you want them to stack the other way around*/ 
        }
        iframe{
            width: 100%;/*Make iframes take up entire screen since they are no longer next to each other*/
        }
    }
</style>
<div class="container">
    <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSciufqdxJmnuDrbnCQywya61Tbf5sdf0RXKvbu4rNi7_Dba7gyjQ/viewform?embedded=true" id = "form" width="640" height="1427" frameborder="0" marginheight="0" marginwidth="0">Loading…&lt;/iframe>
    <iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>