我如何舍入 calc 中的值？

Question

我已将 rem 值设置为：

html {
    font-size: calc( 13px + ( (100vw - 767px) / 767 ) );
}

它在 767px 宽屏幕上等于 13 像素，在大屏幕上更大，在小屏幕上更小。

一切都像一个魅力，除了transform当它们的大小设置为 rems 时，当使用 CSS 为内联元素设置动画时，我会得到奇怪的间隙。我做了一些测试，当我将 rem 值设置为 13 或 14px 等圆形值时，问题似乎消失了。有什么办法可以绕过我上面的表达吗？

Answer 1

没有原生的CSS方法来处理 round calc，除非你使用的是scss（Sass），有一个库可以做到这一点。检查 这里

calc或者，因为如果您想要“响应式”字体大小，那么使用它不是一个好主意，因此您可以使用本机方法和单位，例如em或vm等vh，calc这会花费更多的 CPU 周期。

此外，如果您需要特定屏幕尺寸中的特定字体大小，您可以使用CSS Media queries. 这里有一个很好的资源

vw 和 vh 的示例：

1vw = 视口宽度的 1%
1vh = 视口高度的 1%
1vmin = 1vw 或 1vh，以较小者为准
1vmax = 1vw 或 1vh，以较大者为准

看看它的实际效果：

查看此以获取更多信息