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

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;

希望这对您有所帮助。