我如何在 calc 中舍入值？答案

【问题标题】：How do i round values inside calc?我如何在 calc 中舍入值？
【发布时间】：2018-03-18 00:41:35
【问题描述】：

我已将 rem 值设置为：

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

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

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

【问题讨论】：

【解决方案1】：

没有原生 css 方法来舍入 calc，除非你是使用scss (Sass) 有一个这样做的库。查看 here

另外，因为使用 calc 不是一个好主意，如果你想拥有“响应式”字体大小，你可以使用原生方法和单位，如 em 或 vm 或 vh 等，而不是 @987654334 @ 这会花费更多的 CPU 周期。

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

vw & vh 示例：

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

查看实际操作：

查看this 了解更多信息

【讨论】：

我同意，有一半的浏览器是真人用的，反正不支持calc()。
@KIKOSoftware，似乎有不错的支持：caniuse.com/#feat=calc。
@sdvnksv 是的，这是查找支持的好资源，我快速浏览了这个网址：developer.mozilla.org/en-US/docs/Web/CSS/calc 向下滚动到“浏览器兼容性”。
并评论答案，想象一下如果我直接用 vh 指示它的大小，移动设备上的一般文本会有多小。这将需要我想避免的其他媒体查询。虽然我的解决方案似乎非常通用，并且仅根据视口大小略微增加/减少 rem 值。
如果桌面和移动屏幕上的文本/大众比率相同但甚至不接近，这将起作用。另外问题是如何在 calc 中舍入值，抱歉。