Figma 在 CSS 中使用 rem 值的工作流程是啥？

Posted 2023-02-22

【中文标题】Figma 在 CSS 中使用 rem 值的工作流程是啥？

【英文标题】：What is the workflow in Figma for using rem values in CSS?Figma 在 CSS 中使用 rem 值的工作流程是什么？

【发布时间】：2020-09-25 12:44:37

【问题描述】：

我是网络开发新手，想了解以下工作流程：

我在 Figma 中设计了一个网站以及以像素为单位的字体样式（在 Figma 中不能使用 em 或 rem） 为了有一个响应式网站，我想用 rem 单位编写 CSS 代码

我现在是否根据段落标签中的基本字体大小手动将所有 px 单位转换为 rem 单位？这里的数学是怎么做的？

【问题讨论】：

不仅将 px 替换为 em 或 rem 会使您的网站具有响应性，为了使您的网站具有响应性，您必须处理媒体查询，根据需要制作尽可能多的断点。

【参考方案1】：

如果您正在寻找一种在给定基本尺寸的情况下计算 px 和 rems 之间转换的快速方法，您可以在网上找到很多转换器，例如 https://www.ninjaunits.com/converters/pixels/pixels-rem/

一般来说，尝试利用诸如 sass 之类的预处理器，它允许您声明变量，从而使您的样式表更容易更改。例如：

$font-size-base:              1.125rem !default; // Assumes the browser default, typically `16px`
$font-size-lg:                $font-size-base * 2 !default;
$font-size-md:                $font-size-base * 1.5 !default;
$font-size-sm:                $font-size-base * 0.8 !default;

希望这会有所帮助。

【参考方案2】：

我使用过 rem 和 em，它们在简单的网站上运行良好，但一旦你进入复杂的 UI，像素才是王道。

在处理响应式媒体查询时，我发现文本也因 rem/em 而扩展时非常不可靠。使用像素，您可以为标准文本设置默认的 16 像素，然后在某些情况下在移动设备上可能会将其降至 14 像素。这是在整个网站上完成的，而不是针对每个元素。

所以，是的，这里和那里都有一些调整，但不是很多。一开始需要做更多的工作，但以后会节省大量时间，因为当用户单击链接并推送文本时，您每周都会遇到 10 个错误，并且网站的某些部分在某些平板电脑上无法正常运行再往右走。

全面保持像素，您在 Figma、html/CSS 和 javascript 中拥有相同的测量单位，并且事情保持简单，无需任何计算。

【讨论】：

我不同意字体和行高：css-tricks.com/… px 不够灵活/保持更高的设计保真度。