web响应式布局中iframe自适应的方法
我要评论问题
在响应式布局中，我们应该小心对待iframe元素，iframe元素的width和height属性设置了其宽度和高度，但是当包含块的宽度或高度小于iframe的宽度或高度时，会出现iframe元素溢出的现象：
这样溢出的iframe会破坏页面的布局。我们可以采用一种方法让iframe元素也具有响应性，拭目以待。
解决方法
iframe元素本身并无法伸缩，除非通过js显示的设置其宽度。但是我们可通过一个iframe-container元素来包裹iframe，同时让iframe-container元素的宽度充满包含块的宽度，并且根据iframe的长宽比，设置iframe-container元素的padding-bottom百分比。
其实，这种方式的精髓就在于设置iframe-container元素的padding-bottom属性，设置该属性的目的在于变相的设置元素的高度。因为给padding-bottom设置百分比，是相对于父元素的width而言的，如果对height属性设置百分比，则相对于父元素的height，而父元素的height值我们通常使用默认的auto，因此会出现子元素height也为0.因此，我们只能给padding-bottom设置属性。这样，只需让iframe元素充满iframe-container即可。
.wrap{
width: 400px;
margin: auto;
border: 5px solid greenyellow;
}
.iframe-container{
height: 0;
padding-bottom: 97.6%;
position: relative;
}
.iframe-container iframe{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
@media screen and (max-width: 400px) {
.wrap{
width: 300px;
}
}
<div class="wrap">
<div class="iframe-container">
<iframe height=498 width=510 src="<a href="http://player.youku.com/embed/XOTE0MjkyODgw">http://player.youku.com/embed/XOTE0MjkyODgw</a>" frameborder=0 allowfullscreen></iframe>
</div>
</div>
结果显示的状态：
当视口宽度大于400px时：
当视口宽度小于400px时：
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
相关文章
CSS3 media queries + jQuery实现响应式导航
这篇文章主要介绍了CSS3 media queries + jQuery实现响应式导航的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-30
本PPT主要讲述的是CSS3 过渡、变形和动画；有需要的朋友可以下载看看2016-09-05
这是一款使用jQuery和CSS3制作的响应式分步定制商品模板，最后的步骤会给出商品的价格和描述信息2016-09-02
HTML5实现响应式多角度全屏切换特效源码是一款基于HTML5 SVG实现的响应式全屏切换特效。本段代码适应于所有网页使用，有需要的朋友可以直接下载使用2016-08-04- 下面小编就为大家带来一篇css3 media 响应式布局的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-03
- 下面小编就为大家带来一篇响应式布局的简单案例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-07-18
- 下面小编就为大家带来一篇css3media响应式布局实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-08
bLazy.js 轻量级支持响应式图片的lazyLoad脚本
一个不依赖于第三方JS库（如 jQuery）的lazyLoad脚本，压缩版只有几Kb，而且支持根据不同的设备宽度显示不同大小的图片，这个功能对于响应式开发非常有用，也是推荐的主要2016-07-07
jQuery+Hover实现响应式下拉导航菜单栏特效源码是一款鼠标经过，下拉显示一片子导航菜单栏目特效，排版精致，适用各大网站。需要的朋友前来下载使用2016-06-20
jQuery+CSS3实现响应式鼠标悬停图片边框炫酷动画特效源码
jQuery+CSS3实现响应式鼠标悬停图片边框炫酷动画特效源码是一款鼠标经过图片边框渐变动画特效。有需要的朋友可以直接下载使用哦2016-06-16
最新评论