最新下载
热门教程
- 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。
相关文章
- 无限暖暖神秘作者任务怎么做 神秘作者任务流程攻略 09-18
- 如鸢董奉怎么玩 董奉玩法攻略 09-18
- 嘟嘟脸恶作剧活泼队怎么搭配 活泼队搭配推荐 09-18
- 如鸢曹植值得抽吗 曹植抽取建议 09-18
- 如鸢主线9-13王允低练度怎么过 主线9-13王允低练度过关攻略 09-18
- 嘟嘟脸恶作剧薇尔薇特角色如何 09-18