css - 在 React 中对所有大小值使用 pixels-to-rem 函数(使用样式化组件)是否是一种常见的约定？

Question

我们继承了一些使用样式化组件的 React 元素。

一切都是“正常”的，正如 react/styled 文档所举例说明的那样，但是我们在样式组件(字体、边距等)中指定大小的任何地方都有一个名为 pxToRem 的函数，如下所示:

font-size: pxToRem(16)
width : pxToRem(400)

我的印象是在任何地方都使用这个有点靠不住，对于字体我们可以使用众所周知的映射(比如 14px = .875rem)并指定 rem 值(假设 css 重置在那里) .对于容器宽度，我们可以对不应该改变大小的容器使用像素，或者使用填充/边距来允许容器增长以适应它们的字体。

该转换实用程序当然在多种情况下很有用，可以避免静态计算 rem 值，因此它本身肯定不是反模式，但我建议根据我的经验，我通常不会看到每个转换都使用尺寸值。感觉像是代码的味道，但团队的印象是大多数人可能使用类似的模式。

只是寻求解决此模式的共性，以及对此类实用程序的正常使用级别的响应。

Answer 1

Facebook 就是这样做的(他们于 2020 年 5 月 8 日发布):

"By using rems, we can respect user-specified defaults and are able toprovide controls for customizing font size without requiring changesto the stylesheet. Designs, however, are usually created using CSSpixel values. Manually converting to rems adds engineering overheadand the potential for bugs, so we have our build tool do thisconversion for us."

来源: https://engineering.fb.com/2020/05/08/web/facebook-redesign/

Frank Yan 和 Ashley Watkins 的额外解释: https://www.youtube.com/watch?v=WxPtYJRjLL0