Reframe.js笔记 | CSS-Tricks

FitVids.js 仍然是一个完全可行的迷你插件，用于使视频（或任何内容）响应式。对于包含 YouTube 或 Vimeo 视频、Instagram 嵌入或任何在纵横比方面不响应式的内容的网站，您需要它或类似的东西。<img>/<video> 以纵横比友好的方式调整其宽度/高度，<iframe>/<canvas>/<object> 则不会。

Reframe.js 算是 FitVids 的现代化版本。

它支持 bower 和 npm。
您可以 require 它。
它不需要 jQuery。

虽然它们在很大程度上做着相同的事情，但也有一些细微的差别

FitVids 会注入它所需的 CSS，而 Reframe 则期望您将其添加到您的样式表中。
您可以在一个容器上调用 FitVids 以搜索其中的元素。您直接向 Reframe 提供选择器。您可以使用两者自定义要查找的内容并进行过滤。

当我们发布推文时，有几个回复是这样的

当您可以使用填充技巧时，为什么要使用这个？

确实，这两种方法都使用了填充技巧或“固有比率”。在要嵌入的内容周围包裹一个容器元素，将其设置为 height: 0; padding-top: 56.25%; position: relative;，然后将元素绝对定位到其中以完全覆盖它。但这样做意味着

您必须自己将包装器元素放置到内容中。
您嵌入的所有内容最好都是 16:9。

使用这两个库中的任何一个意味着

包装器会为您注入。
您嵌入的内容将被测量并应用正确的纵横比。

两者都很有价值。我不想手动编写 div 包装器，我只想复制粘贴嵌入代码。而且并非所有内容都是 16:9。

zzzzBov

# 2016年9月19日

并非所有内容都是 16:9

我使用了一系列常见的预设纵横比，在我看来，它的语法易于阅读:

<div data-aspect-ratio="16:9">...</div>
<div data-aspect-ratio="4:3">...</div>

我不想手动编写 div 包装器……

对此表示赞同。

我特别喜欢使用 markdown 和一系列后处理器来添加各种修饰。一旦服务器端处理嵌入内容就变得很容易处理（例如在节点中使用cheerio）

const $ = cheerio.load(html);
$('iframe[src^="http://www.youtube.com"]').wrap('<div data-aspect-ratio="16:9">');
return $.html();

当然，这段代码没有显示如何处理嵌入内容的不同纵横比，但这也可以轻松添加。

Karl Brown

# 2016年9月20日

您嵌入的所有内容最好都是 16:9。

您可以编写一些类来为您处理不同的纵横比——我有一个笔，其中最小化的 CSS 不到 350 字节：http://codepen.io/KBD/pen/EVGjYG

如果您正在编写一些最终可能成为 CMS 中组件的内容，或者您已经在 CMS 中拥有视频播放器组件，则无需每次都担心添加包装器。

尽管这确实让我想知道为什么 CSS 中没有 aspect-ratio 规则。例如像

  .video {
    width: 100%;
    height: aspect-ratio(16,9)
  }

这将计算高度为每 16 个单位宽 9 个单位高。如果您有明确的宽度（例如 16rem），则高度为 9rem。

Vanderson

评论永久链接# 2016年9月20日
这可以做到。 :)

这是我用来保持幻灯片在相同比率的概念，无论屏幕尺寸如何。
```
.video {
  width: 100%;
  height: calc( 100vw * (9  / 16));
}
```

Andrew Myers

# 2016年9月20日

我不喜欢为此类事情使用 JavaScript 的原因是我痴迷于渐进增强。HTML 具有基本内容，CSS 接下来加载基本样式，最后 JavaScript 添加它所做的任何事情。如果可以在管道中较早地处理某些内容（通过 CSS 而不是 JS），则应以这种方式完成，以便更多用户可以使用它。这可能也属于关注点分离的内容。

当 JavaScript 必须运行才能使某些内容大小正确时，您有两个选择

使用阻塞渲染的 JavaScript，这会降低页面速度
在 JavaScript 加载并修复它之前，页面看起来不对

当您仅使用 CSS 处理它时，您可以避免这两个问题。

为了避免手动计算填充框的百分比，您可以使用 Sass

@function aspect-ratio($width, $height) {
  @return $height / $width * 100%;
}

.video {
  position: relative;
  width: 100%;
}

  .video--16-9 {
    padding-top: aspect-ratio(16, 9);
  }

  .video--24-7 {
    padding-top: aspect-ratio(24, 7);
  }

当您将其与 BEM 结合使用时，您可以在需要时快速创建新的视频尺寸。Inuit.css 具有比率对象，它执行类似的操作。

Jeff Wainwright

# 2016年9月21日

我几天前写了 reframe.js，没想到它会收到这么多反馈。对我来说意义非凡（感谢 Chris）。最初，编写它的原因是我们在一个我正在开发的产品中没有使用 jQuery。

然后我意识到使用 rollup.js 并删除一些假设的东西，我可以使代码对我自己的用途更轻量级。

我赞赏上面讨论的 intrinsic ratio css mixin 方法，但它不适用于我的用例。

现在，我在 reframe.js github 存储库中收到一个很棒的问题，关于 iframe 在 DOM 中移动时出现的问题。我编写了插件的另一个版本，它不需要 div 包装器，但它的工作方式有所不同。

有没有人对解决此类更改的最佳方法有任何想法/意见？

~谢谢

zim

评论永久链接# 2016年9月28日

我在一个电子邮件模板产品上工作，我们处理很多 iframe 和拖动的 iframe，我们发现解决在 DOM 中移动时将 iframe 重置为默认值的 bug 的唯一方法是在拖动开始时存储其状态，并在拖动完成后再次设置其状态。
我们在这些 iframe 上有 WYSIWYG 编辑器，因此当拖动开始时，编辑器详细信息（内容等）将被存储，然后编辑器将被销毁。拖动完成后，编辑器将被重新创建并插入内容。

Tommy

# 2016年9月26日

我经常需要实现响应式视频嵌入，而不是尝试“填充”技巧，我习惯于直接从 Youtube 或 Vimeo 复制粘贴嵌入代码，并保持 width="" 和 height="" 属性完整，并使用 JS 计算元素的正确高度，因为宽度自适应以填充其容器：http://codepen.io/tomhodgins/pen/PZqaLm

在另一个示例中，所需的纵横比存储在名为 data-ratio="" 的自定义数据属性中，并由（JS 和）CSS 读取，并且基于相同公式计算正确的高度：http://codepen.io/tomhodgins/pen/XKJpYr

此评论线程已关闭。如果您有重要信息要分享，请联系我们。