html - 我如何在 calc 中舍入值？

Question

我已将 rem 值设置为:

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

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

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

Answer 1

There is no native css method to round calc, unless you are using a scss (Sass) there is a library of doing that. Check here

或者，因为使用 calc 不是一个好主意，如果你想要一个“响应式”的字体大小，你可以使用像 em 或 vm 或 vh 等比 calc 花费更多的 CPU 周期。

此外，如果您需要特定屏幕尺寸的特定字体大小，您可以使用 CSS 媒体查询。 Here is a good resource

vw 和 vh 的示例:

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

查看实际效果:

检查 this了解更多信息