如何使嵌入谷歌表单响应？答案

【问题标题】：How can I make embed google form responsive?如何使嵌入谷歌表单响应？
【发布时间】：2020-11-18 15:56:05
【问题描述】：

我正在做一个项目，但还不知道任何后端代码，所以我使用的是 embed google 表单，但这不是响应式的。这是我试图使该表单响应的代码，但不知何故代码不起作用。

.contact-form {
    background-image: linear-gradient(to right, #d8d8d8, #3c557f);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 50px;
    .contact-form-conainer {
        padding: 50px !important;
        @media screen and (max-width: 768px){
            font-size: 15px !important;
            margin: 0 20px 0 20px !important;
            padding: 10px !important;
            overflow: hidden !important;
        }
        @media screen and (min-width: 576px){
            font-size: 15px !important;
            margin: 0 20px 0 20px !important;
            padding: 10px !important;
            overflow: hidden !important;
        } 
        @media screen and (max-width: 576px){
            font-size: 15px !important;
            margin: 0 20px 0 20px !important;
            padding: 10px !important;
            overflow: hidden !important;
        }
    }
}</style>


<div class="container-fluid contact-form">
        <div class="contact-form-container">
            <iframe
                src="https://docs.google.com/forms/d/e/1FAIpQLSe_ajLSx8IN9zQNS_SIwOyPV-iIMtoTj-nHOqyu5nSR10GTIQ/viewform?embedded=true"
                width="640" height="780" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
        </div>
</div>```

【问题讨论】：

作为 iframe 调用，在嵌套包装元素上具有 min-width min-height 然后 max-width max-height 100%

标签： html css google-forms

【解决方案1】：

你的 HTML 很开心

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 100%; /* 1:1 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
</style>
</head>
<body>

<h2>Responsive Iframe</h2>
<h3>Maintain Aspect Ratio 1:1</h3>
<p>Resize the window to see the effect.</p>

<div class="container"> 
  <iframe class="responsive-iframe" src="https://www.morrmat.com"></iframe>
</div>

</body>
</html>

【讨论】：

不要发布重复的答案。改为编辑您的第一个答案
你想要什么
我知道如何让其他网站嵌入代码响应，但我说的是谷歌表单嵌入，它的工作方式与其他网站不同。
把链接给我

【解决方案2】：

污垢简单的解决方法是将width属性设置为100%而不是默认值760px

【讨论】：