html - 转换容器时避免字体大小缩放的最佳方法是什么？

Question

我正在使用 CSS transform: scale动画模式的输入。问题是文本比例为 <div>包含它。

如何避免？

我想使用 scale因为它是 suggested获得更流畅动画的方法。

Answer 1

您可以做的是转换容器和文本。

容器按比例放大，而文本按比例缩小 - 所以它看起来保持不变。

这是一个非常基本的例子:

button:focus + div {
  transform: scale(2);
}

button:focus + div p {
  transform: scale(.5);
}

div {
  width: 200px;
  margin: 0 auto;
  text-align: center;
  background: black;
  color: white;
}

<button>Click to scale box</button>

<div>
  <p>Do not scale this text</p>
</div>