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

Question

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

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

我现在是否可以根据段落标记中的基本字体大小手动将所有 px 单位转换为 rem 单位？这里的数学是如何完成的？

Answer 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;

希望对您有所帮助。

Answer 2

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

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

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

全面关注像素，在 Figma 中，在 HTML/CSS 和 Javascript 中有相同的测量单位，并且事情很简单，不需要任何计算。