3

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

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

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

4

2 回答 2

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;

希望这可以帮助。

于 2020-06-06T10:55:26.503 回答
0

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

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

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

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

于 2021-05-14T15:20:47.137 回答