下一站永远 发表于 2013-1-4 03:08:08

HTML5实践 -

<div id="cnblogs_post_body">  转载请注明原文地址:http://www.cnblogs.com/softlover/archive/2012/11/25/2787558.html

  当我编码Elemin Theme(我最近设计的一个响应式的站点)的时候,我遇到的一个跳帧就是,如何能让嵌入式的视频在尺寸变化上变得更加灵活。使用max-width:100% 和height:auto可以让html5的video标签很好的工作,但是这个解决方案不适用于iframe 或者 object标签的内嵌代码。通过几小时的寻找资料和实验,我最终找到了解决办法。当你在进行响应式设计的时候,这一css技巧能派上用场。你可以访问最终demo地址,缩放你的浏览器查看效果。

  demo查看地址:http://webdesignerwall.com/demo/elastic-videos

  灵活的html5 video标签(demo)

  使用html5的video,可以通过设置max-width:100%让他变得灵活。前面的介绍中,已经提到他不适用于常用的iframe和object中的内嵌代码。
<div class="cnblogs_code">video {    max-width: 100%;    height: auto;}
页: [1]
查看完整版本: HTML5实践 -