可伸缩响应式动画 | CSS-Tricks

让我们的网站和应用程序在每个屏幕上都能完美显示是一件很困难的事。其中一大难点在于尝试让特定组件（尤其是那些必须保持特定大小的组件，例如动画）在任何屏幕尺寸下都能保持良好的效果。在这篇文章中，我们将介绍如何帮助保持我们响应式动画的尺寸符合预期。

在进入具体技术之前，我们要牢记一些基本准则。

响应式动画伸缩准则

1. 基于容器大小动画

无论我们使用的是响应式伸缩还是自适应伸缩（见下文），我们都应该尝试基于容器大小来调整动画的大小。在响应式伸缩中，这很简单，但在自适应伸缩中，我们必须查看元素（容器）查询。唯一的例外是，如果我们知道在任何情况下元素都将相对于视窗进行定位和调整大小。即使如此，根据容器调整每个部件的大小也可能是一个明智的做法，以备我们日后改变主意。

我曾经多次完成动画的润色，发现它只适用于特定的屏幕尺寸。这些错误包括使用绝对单位（如 px），只在一个屏幕尺寸下查看它，使用响应式单位但没有检查极端尺寸，以及其他一些需要我重新考虑并完全重构方法的情况。相对于父元素调整动画的大小有助于防止这种情况发生，正如以下几点所述。

2. 了解动画将使用的环境

动画是否会是一个在应用程序多个部分重复使用的模块？它是否只会在初始页面加载器中使用？它是否需要进行缩放？牢记这些问题可以帮助确定动画的伸缩方法，并避免浪费精力。

现在，让我们看一下三种最重要的动画伸缩方式：使用响应式单位伸缩、比例伸缩和自适应伸缩。

使用响应式单位伸缩

根据父元素调整部件大小

当我们使用响应式单位（如 % 或 em）时，我们的动画会根据父元素自动调整大小，因为它们的父元素的值会随着父元素的值的变化而变化。

在百分比的情况下，子元素的宽度值由父元素的属性值乘以子元素设置的百分比值来确定。
在 em 的情况下，它会查看父元素的 font-size，该值决定子元素的大小值，并乘以 em 的数量。

这使我们能够确保响应式动画的每个部分都保持我们期望的相互行为。

根据视窗调整容器大小

从这里开始，如果我们根据视窗调整容器的大小，我们的响应式部件也会根据视窗进行调整大小。

我们可以使用百分比根据视窗调整容器的大小，但这通常需要设置类似 html, body { height: 100%; } 的规则，并确保父元素相对于 body 进行调整大小，而这在嵌套的情况下并不总是成立。添加这个新规则也会影响其他样式变化。

或者，我们可以使用*视窗单位*，它根据视窗调整容器的大小，无论嵌套深度如何。有一点需要注意的是，视窗单位的支持情况并不完美，但它已经可以用于大多数项目。

当动画非常简单时，我倾向于只使用响应式单位作为动画的缩放器，例如这种错觉。大多数情况下，它需要将响应式单位与下面的一种方法结合使用才能保持动画的比例。

比例伸缩

我们可以通过三种主要方式在伸缩响应式动画时保持其比例。

1. 根据宽度调整大小

为了使元素根据容器的宽度进行调整大小，我们可以使用以下方法

.container {
  height: 0;
  padding-top: 100%;
}

查看 CodePen 上 Zach Saucier (@Zeaklous) 的笔无限山脉 CSS。

但是，如果您是根据视窗调整容器的大小，则更直接的方法是使用 vw 如下所示，虽然它的支持情况并不那么广泛。

2. 根据高度调整大小

我们也可以使用 vh 来根据高度调整容器的大小，如此演示所示，但这是我见过的最不常用的技术。我唯一记得自己使用这种方法的例子是，我使用响应式单位创建了此加载器，但即使在那种情况下，我也没有使用容器或视窗单位。

3. 根据较小尺寸调整大小

根据较大尺寸调整大小是我调整响应式动画大小最常用的方法，尤其是我的可视化效果，因为我几乎总是希望所有响应式动画都能完全显示。这种方法确保了这一点。

.container {
  max-width: 100vh;
  max-height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.container::before {
  content: "";
  display: block;
  margin-top: 100%;
}

查看 CodePen 上 Zach Saucier (@Zeaklous) 的笔旋转点。

此技术没有使用 vmax 单位，因此任何支持视窗单位的浏览器（回溯到 IE9）都可以使用它。但是，它确实使用了伪元素（除非您想使用真实元素），这一点应该牢记。

如果你是根据视窗本身来缩放容器，并且可以使用视窗单位，那么根据较大的尺寸进行大小调整非常简单。你只需要

.container {
  width: 100vmin;
  height: 100vmin;
}

这种方法只能在动画相对于视窗进行大小调整时使用，而不能是相对于更小的容器。

自适应缩放

自适应缩放是在特定断点之间切换不同的变体。参见Geoff Graham 在 CSS-Tricks 上写的关于自适应缩放和响应式缩放区别的文章。

有时候，我们可能希望响应式动画的至少一部分在特定屏幕尺寸下改变其大小调整方式。这种情况最常发生在使用文本或细线时，但有时也适用于有许多复杂元素的动画，这些元素在缩小后会显得过于繁杂。Logo 可能是最常被自适应调整的元素，因为它们需要保持精确。

没有一种方法可以使元素自适应，但我通常以同样的方式来处理自适应设计：将动画进行缩放，直到出现难看的效果，然后添加断点来修复难看的部分。

有时将响应式元素与自适应元素混合使用是合适的，例如下面的代码示例。顶部部分是响应式的，但文本是自适应的，以防止文本缩放在中间字体大小的时候变得难看。

参见代码示例 Breakout 由 Zach Saucier (@Zeaklous) 在 CodePen 上发布。

关于 SVG 的说明

SVG 可以使用上面列出的任何方法。通常，我将 SVG 视为一个模块化的动画，并确保 SVG 的大小由 SVG 元素本身决定，主要将其视为一个基于较大尺寸的容器，如上面所述。这样，它就可以利用 SVG 的矢量特性，使其可以根据需要进行缩放。

有关如何专门缩放 SVG 的更多信息，请查看Amelia Bellay-Royds 在 CSS-Tricks 上写的缩放 SVG 组件的文章，或者查看Sara Soueidan 在 Codrops 上写的使 SVG 响应式的文章。

让它在所有环境下都看起来很棒

通过一些计划，动画可以在小尺寸下和在大尺寸下一样好地工作。不要使用像素单位，确保每个宽度、高度和距离值都是根据一个或两个变量定义的，这些变量基于容器/视窗尺寸或字体大小。