Question

我有一个iframe表单。下面的代码用＃表示iframe。在桌面上我需要框架高度为292px以匹配设计。在平板电脑上，它需要有高度=＆＃34; 180＆＃34; 在移动高度=＆＃34; 292＆＃34; 我已经尝试使高度100％并改变持有iframe的大小但是iframe太短并且切断了表单的底部我可以为不同的视口调整iframe的高度吗？

<iframe src="#" width="100%" height="292" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe>

Answer 1

创建一个名为 responsive.css 的文件，并将其添加到您的样式中。在其他css文件之后添加此文件是一种很好的做法，因为您希望这些规则优先于其他css规则。

这将是您的responsive.css的内容

/* Style for Extra Large Screen */
@media (max-width:1199px) {
    iframe {
        height: 292px;
    }
}

/* Style for Large Screen */
@media (max-width:991px) {
    iframe {
        height: 292px;
    }
}

/* Style for Medium Screen */
@media (max-width:767px) {
    iframe {
        height: 180px;
    }
}

/* Style for Small Screen */
@media (max-width:575px) {
    iframe {
        height: /* whatever height you want for mobile */
    }
}

根据您的屏幕尺寸，您的网站将使用responsive.css的正确部分。例如，如果您使用的是移动设备，则会选择@media (max-width:575px)。把你所需的高度放在这里。

如何针对不同的屏幕尺寸更改iframe的高度？

1 个答案: