如何针对不同的屏幕尺寸更改iframe的高度? [英] How can I change the height of an iframe for different screen sizes?

问题描述

我有一个是iframe的表单. 下面的代码用#表示iframe是什么. 在桌面上，我需要框架的高度为292px，以匹配设计. 在平板电脑上，它的高度必须为"180" 移动高度="292" 我尝试过将高度设为100％，并更改了持有iframe的大小，但iframe太短了，切断了表格的底部 我可以针对不同的视口调整iframe的高度吗?

I have a form that is an iframe. The code is below with a # for what the iframe is. On desktop I need the frame to be 292px in height to match the design. On tablet it needs to have height="180" On mobile height="292" I have tried making the height 100% and changing the size of the holding the iframe but the iframe is too short and cuts off the bottom of the form Can I do adjust the height of an iframe for different viewports?

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

推荐答案

创建一个名为 response.css 的文件，并将其添加到您的样式中.最好将此文件添加到其他css文件之后，因为您希望这些规则优先于其他css规则.

Create a file called responsive.css and add it to your styles. It's good practice to add this file after other css files as you want these rules to take priority over your other css rules.

这将是您的sensitive.css的内容

This would be the content of your 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 */
    }
}

根据您的屏幕大小，您的网站将使用正确的响应部分.例如，如果您在移动设备上，则将选择@media (max-width:575px).只需在此处输入所需的高度即可.

Depending on your screen size, the correct section of responsive.css will be used in your website. For example, if you are on mobile, then @media (max-width:575px) will be selected. Just put your required height in here.

这篇关于如何针对不同的屏幕尺寸更改iframe的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！