从 figma 中的像素到 css 中的 rem 的工作流程是什么？

Question

I am new to web developement and would like to understand the following workflow:

1. I design a website in figma along with font styles in PIXELS (can't use em or rem in figma)
2. In order to have a responsive website i want to write the css code wit REM

QUESTION: Do I now manually convert all the px units into rem units based on the base font size in the paragraph tag? how is the math done here?

best regards anna

Answer 1

If you are looking for a quick way to compute the conversion between px and rems given a base size, you can find lots of converters online, eg https://www.ninjaunits.com/converters/pixels/pixels-rem/

In general, try to take advantage of a preprocessor such as sass, which allows you to declare variables making your stylesheets easier to change. For example:

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

Hope this helps.

Answer 2

I worked with rem and em and they function ok for simple websites, but once you get into complex UIs pixel is king.

When working with responsive media queries, I find it very unreliable when text also expands because of rem/em. With pixels you set your default 16px for standard text and then maybe drop it to 14px in some cases when on mobile. And this is done across website, not for each and every element.

So, yes, there are some adjustments here and there, but not that many. It's a bit more work at first, but it will be a huge time saver later on, because you will get 10 bugs every week with some part of the website not behaving correctly on some tablet when the user clicks a link and the text is pushed further to the right.

Staying on pixels across the board, you have the same measurement unit in Figma, in HTML/CSS and Javascript, and things are kept simple, without any calculations needed.