使用Reframe.js使所有嵌入式内容具有响应能力

嵌入视频最棘手的部分是正确设置宽度和高度。 这些数字定义了长宽比 ，当它们关闭时，您将获得一个摇晃的视频播放器 。

对于所有嵌入式元素（例如iframe和社交媒体小部件）都是如此。 而这些东西在响应式设计中甚至会更加棘手，因为它们通常不是响应式元素 。

但是使用Reframe.js ，您可以使任何元素对任何宽高比作出响应 。

这也许是网络上最简单但最有价值的JS插件之一。 它实际上是由Dollar Shave Club创建的，该俱乐部令人惊讶地具有自己的GitHub页面 。

Reframe是他们的免费插件之一，这些插件是为想要以更简单的方式处理响应式嵌入式内容的开发人员而开发的。

罪魁祸首是来自YouTube和Vimeo等网站的嵌入式视频。 没有CSS hacks ，使这些元素具有响应性是非常困难的 。

使用Reframe.js，您只需选择要定位的任何元素， 然后使用reframe()函数对其进行reframe()构图。

首先将Reframe.js插件添加到您的网页。 您可以从GitHub 下载副本 ，并且副本只有1KB。

然后，您只需向函数传递选择器即可选择要重构的任何元素。 加载页面和臂杆！ 你应该准备好了。

例如，假设您的网站上嵌入了一些视频。 您可以将.video类.video到嵌入中 ，并将其用作选择器。 Reframe会自动在其周围添加一个div和class来创建响应式样式。

因此，您的JavaScript代码如下所示：

reframe('.video');

很简单吧？

此代码以.video类为目标的所有元素， 并使它们响应 。 没有额外的技巧，也没有额外CSS。 当然，使用CSS方法没有任何问题，但是您需要使用额外的类手动包装所有嵌入式视频。

Reframe只是为您节省了额外的步骤，并通过JavaScript将其全部实现。 要查看演示并找到一些基本代码段 ，请访问Reframe.js主页 。 您可以直接从GitHub存储库 下载代码的副本 。

翻译自: https://www.hongkiat.com/blog/reframejs/