css3 media query控制iframe高度的例子

作者：袖梨 2022-06-25

在这个场景下，需要使用css media query控制iframe高度：比如一个iframe视频在PC网页上的高度和手机网页上的高度不同。iframe的高度只能设置成固定高度或者所在div的百分比，我们可以通过css query控制这个div的高度，实现iframe在PC和手机上不同高度。

首先，我们在没有定义CSS Media Query的样式里添加：

 代码如下 复制代码

.iframe_height{
 height: 260px;
}

然后当宽度大于1024px的时候，设置CSS Media Query：

 代码如下 复制代码

@media screen and (min-width: 1024px) {
 .iframe_height{
  height: 460px;
 }
}

引用iframe的时候需要嵌入在一个div中，div用.iframe_height的样式并把iframe高度设成100%，如：

 代码如下 复制代码



这样，在PC网页中显示的高度大好多的iframe，在手机中显示的是高度小一点的iframe。

相关文章

精彩推荐