css3 media query控制iframe高度的例子
在这个场景下，需要使用css media query控制iframe高度：比如一个iframe视频在PC网页上的高度和手机网页上的高度不同。iframe的高度只能设置成固定高度或者所在div的百分比，我们可以通过css query控制这个div的高度，实现iframe在PC和手机上不同高度。
首先，我们在没有定义CSS Media Query的样式里添加：
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy2612')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy2612>.iframe_height{
height: 260px;
}
然后当宽度大于1024px的时候，设置CSS Media Query：
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy1412')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy1412>@media screen and (min-width: 1024px) {
.iframe_height{
height: 460px;
}
}
引用iframe的时候需要嵌入在一个div中，div用.iframe_height的样式并把iframe高度设成100%，如：
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy5325')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy5325><div class="iframe_height">
<iframe src="/embed/XODI4OTg5NTky" width="100%" height="100%" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
这样，在PC网页中显示的高度大好多的iframe，在手机中显示的是高度小一点的iframe。
您可能感兴趣的文章：
css3 media query控制iframe高度的例子
js控制iframe高度/宽度自适应
CSS3响应式设计Media Queries模板
CSS3中使用媒体查询（media query）适配布局
js判断当前页面是否被iframe引用的方法
REM相对单位使用案例分享
Iframe 自动适应页面高度实现代码
js与jquery获取父窗口、子窗口中iframe的方法
Sass Map 响应式排版详解教程
JavaScript Iframe自适应高度问题的解决方法