美文网首页
实现页面嵌入内容的响应式

实现页面嵌入内容的响应式

作者: 一点代码 | 来源:发表于2017-05-31 19:02 被阅读0次

在平时写页面的时候，经常会遇到一种情况就是要在页面中插入一个视频或者是图片，当然，对应的方法有许多！

就拿插入视频来说，平时我们会使用video标签直接进行插入，但是video标签在低帮本的IE浏览器中无法支持，显然，这样是不合适的，还有就是使用Flash 但是IOS又是不支持的，所以现在我想说的是，使用iframe !

当你在Web中嵌入外部来的资源时，可以通过iframe:

<iframe src="http:baidu.com" height="90" width="160" allowfullscreen="" frameborder="0"></iframe>

iframe可以将嵌入的外部资源可以在你的网站中显示出来，因为它包含了一个指向内容来源的网址。你可以发现，在iframe中包含了width和height属性。移除这两个属性，iframe会不显示，因为他不会有尺寸。而且非常的遗憾，我们无法通过CSS来解决这个问题。
width属性意味着，当屏幕小于560px的时候，嵌入的内容会超出容器，将打破整个布局。

为了能让嵌入的视频在Web中实现响应式效果，你需要在iframe标签外添加一个容器div（class="box"）来包裹他

<div> 
  <iframe src="http:baidu.com" height="90" width="160" allowfullscreen="" frameborder="0"> 
  </iframe> 
</div>

div和iframe对应的样式：

.box{
position: relative; 
padding-bottom: 56.25%; 
padding-top: 30px; 
height: 0; 
overflow: hidden;
}
iframe{
position: absolute;
 top:0; 
left: 0;
 width: 100%; 
height: 100%; 
}
  • position的值为relative ：用来给iframe设置为absolute值。
  • padding-bottom的值 ：计算视频的纵横比例。在我们的示例中，宽高的比例是16:9，表示高度是宽度的56.25%。如果宽高比是4:3，我们设padding-bottom值为75%。
  • padding-top为30% ：主要为Chrome指定一个空间。
  • height=0 ：因为我们通过padding-bottom来设置元素的高度。我们没有设置width，那是因为他要配合响应式设计自动调整容器的宽度。
  • overflow的值为hidden ：确保溢出的内容能够隐藏起来。
  • 绝对定位 ：，那是因为包含他的容器的高度为０，如果iframe进行正常的定位，我们将给他的高度也是0;设置top和left，将iframe定位在容器的正确位置上；设置width和height值为100%，确保视频占满所用容器空间(实际是设置padding-bottom)的100%。

这样下来，会有个不错的体验！

参考文献http://www.w3cplus.com/responsive/making-embedded-content-work-in-responsive-design.html

相关文章