在React中,对于所有大小值(具有样式化组件),都使用像素到Rem函数是常见的约定吗?

问题描述 投票:1回答:1

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

[react / styled docs会举例说明,一切基本上都是“正常的”,但是在我们指定样式化组件的大小(字体,边距等)的每个地方,都有一个叫做pxToRem的函数,如下所示:

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

我给人的印象是,到处都使用它有点奇怪,对于字体,我们可以只使用众所周知的映射(例如14px = .875rem)并指定rem值(假定存在CSS重置)。对于容器宽度,我们可以对不应更改大小的容器使用像素,也可以使用填充/边距来使容器增长以适合其字体。

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

仅寻求解决这种模式的共同性,并在这种实用程序的正常使用水平上做出响应。

css reactjs styled-components rem
1个回答
1
投票

除非您在项目中强制执行约定,否则开发中没有约定。

如果您查看styled-components documentation,它们使用的是px,rem和em的混合物,但没有pxToRem函数。

似乎写那个旧项目的开发人员习惯于使用像素。然后出现了“用户群使用具有不同像素密度的不同设备”的要求。轻松解决:pxToRem函数“解决”了这一要求。

该转换实用程序当然在多种情况下对避免静态计算rem值,因此肯定不是反模式本身,但根据我在其他人的经验,我建议公司,您通常不会看到适用于所有规模的转化值。感觉像是代码的气味,但团队对此印象深刻大多数人都必须使用类似的模式。

我觉得很奇怪,您的团队认为这必须是规范,而无需查看样式组件文档。现在是您的项目。像对待其他项目一样对待它。

使用过去项目中使用的约定。

XOR

使用样式组件文档中的约定。

© www.soinside.com 2019 - 2024. All rights reserved.