我们继承了一些使用样式化组件的react项目。
react / styled docs可以证明一切都很“正常”，但是在我们指定样式组件大小（字体，边距等）的每个地方，都有一个名为pxToRem的函数，如下所示：
font-size: pxToRem(16)
width : pxToRem(400)
我给人的印象是，到处都使用它有点奇怪，对于字体，我们可以只使用众所周知的映射（例如14px = .875rem）并指定rem值（假定存在CSS重置） 。对于容器宽度，我们可以对不应更改大小的容器使用像素，也可以使用填充/边距来使容器增长以适合其字体。
该转换实用程序在多种情况下当然可以避免静态计算rem值，因此它当然不是反模式本身，但是我建议，根据我的经验，我通常不会看到每个大小值。感觉像是代码的味道，但是团队给人的印象是，大多数人可能使用类似的模式。
只需寻求这种模式的通用性解决方案，并在这种实用程序的正常使用水平上做出响应。
除非您在项目中执行约定，否则开发中没有约定。
如果您查看styled-components documentation，它们会使用px，rem和em的混合物，但没有pxToRem函数。
似乎写旧项目的开发人员习惯于处理像素。然后出现了“用户群使用具有不同像素密度的不同设备”的要求。轻松解决：pxToRem函数“解决”了这一要求。
该转换实用程序在多种情况下当然对 避免静态计算rem值，因此肯定不是 反模式本身，但根据我在其他人的经验，我建议 公司，您通常不会看到适用于所有规模的转化 值。感觉像是代码的气味，但团队对此印象深刻 大多数人都必须使用类似的模式。
我觉得很惊讶，您的团队认为这必须是规范，而无需查看样式化组件文档。现在是您的项目。像对待其他项目一样对待它。
使用过去项目中使用的约定。
异或
使用样式化组件文档中的约定。
,Facebook 就是这样做的（他们于 2020 年 5 月 8 日发布）：
"通过使用 rems，我们可以尊重用户指定的默认值，并且能够 提供无需更改即可自定义字体大小的控件 到样式表。然而，设计通常是使用 CSS 创建的 像素值。手动转换为 rems 会增加工程开销 以及潜在的错误，所以我们有我们的构建工具来做到这一点 为我们转换。”
来源： https://engineering.fb.com/2020/05/08/web/facebook-redesign/
Frank Yan 和 Ashley Watkins 的额外解释： https://www.youtube.com/watch?v=WxPtYJRjLL0