流体力学视频课百度云_具有视口宽度单位的即时流体视频

最新推荐文章于 2025-12-25 21:52:53 发布

翻译最新推荐文章于 2025-12-25 21:52:53 发布 · 196 阅读

文章标签：

#css #android #html5 #html #css3

本文介绍了一种使用视口宽度单位使视频响应式的方法，通过简单的CSS代码即可实现。讨论了如何解决添加边距和边框的问题，并提供了适用于不同比例视频的示例。

流体力学视频课百度云

本征比是一种用于在网页上扩展和收缩元素的方法，它可以使元素流畅，同时限制其比例。 Thierry Koblentz最早在2009年提出了这个想法。

它们通常与视频结合使用，因为iframe的宽度或高度（嵌入视频内容时通常使用的元素）都无法自动缩放以适应流畅的网站。

长话短说：默认情况下，视频没有响应。

关于这个问题已经完成了大量的写作。其中最著名的是蒂埃里·科布伦茨（Thierry Koblentz）的“列表分开” 文章，该文章建议做很多工作position: relative对旧的Internet Explorer进行position: relative和一些破解，并在完成实现时，添加了数十行内容代码到您的标记和CSS只是为了使视频响应。啊！

视口宽度单位

值得庆幸的是，我们现在可以访问大众尺寸调整单元，并且只要您不必支持旧的Android设备或IE8，就可以相对安全地使用它。

我们要做的就是将iframe的宽度设置为100％，然后将其高度设置为以下公式： (100 * ratio)vw 。

对于大多数YouTube视频，您的比例将为16：9（否则表示为9/16），因此要使YouTube视频具有响应性，请使用以下CSS代码：

iframe { 
    width: 100%; 
    height: 56.25vw; /* 100 * (9/16) */
}

当您使用Sass，LESS或Stylus之类的预处理器时，这将变得更加容易，因为您可以随时随地传递任何比率。例如，对于4：3的视频，您可以编写：

iframe
  width: 100%
  height: (100 * (3/4))vw

添加边距和边界

如果我们要为其添加边距或边框会怎样？看来一切都破了。为了解决这个问题，我们只需要将边框和边距添加到包装元素中，然后使用calc从高度中减去边框即可。我们在iframe添加了display: block ，以防止它在视频底部造成间隙。

.vid
  margin: 2rem
  border: 30px solid red

iframe
  width: 100%
  height: calc((100vw - 60px) * (9/16))
  display: block

如果我们希望将视频放置在仅占视口70％的容器中，该怎么办？很简单，我们只需将calc函数中的70vw更改为100vw 70vw 。

结论

这里的所有都是它的！超级容易响应的视频。有关比率和大众单位的更多详细信息，请查看Jason Talbert出色的CodePen 。

翻译自: https://webdesign.tutsplus.com/tutorials/instant-fluid-videos-with-viewport-width-units--cms-22845

流体力学视频课百度云