最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css3 media query控制iframe高度的例子
时间：2022-06-25 13:42:12 编辑：袖梨 来源：一聚教程网
在这个场景下，需要使用css media query控制iframe高度：比如一个iframe视频在PC网页上的高度和手机网页上的高度不同。iframe的高度只能设置成固定高度或者所在div的百分比，我们可以通过css query控制这个div的高度，实现iframe在PC和手机上不同高度。
首先，我们在没有定义CSS Media Query的样式里添加：
| 代码如下 | 复制代码 |
|
.iframe_height{ |
|
然后当宽度大于1024px的时候，设置CSS Media Query：
| 代码如下 | 复制代码 |
|
@media screen and (min-width: 1024px) { |
|
引用iframe的时候需要嵌入在一个div中，div用.iframe_height的样式并把iframe高度设成100%，如：
| 代码如下 | 复制代码 |
|
|
|
这样，在PC网页中显示的高度大好多的iframe，在手机中显示的是高度小一点的iframe。
相关文章
- 嗨皮漫画浏览器登录-嗨皮漫画官方中英文版注册入口镜像地址 01-28
- 王者荣耀云缨p衣图-王者荣耀女英雄云缨去掉所有遮挡高清图片汇总 01-28
- 超星网课学生登录入口-超星学生通官网在线登录入口 01-28
- qq登录网页版入口-QQ官网网页版一键登录 01-28
- 126邮箱登录入口-126邮箱官网登录首页 01-28
- 免费看电影软件哪个好-无会员看电影软件推荐 01-28