有没有办法为某些区域设置单独的根字体大小？

Question

我有一个用react和css模块编写的设计系统，间距、字体、元素大小等的单位都是用rem编写的（将基值设置为16px）

html {
  font-size: 16px;
}

::root {
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  ....
  --h1-font-size: 3.813rem;
  --h2-font-size: 3.063rem;
  --h3-font-size: 2.75rem;
  ...
}

问题是，在我想要导入设计系统的项目中，到处都使用了 rem，并且根基值已经设置为 10px。

因此，从设计系统包导入的所有组件都会按比例缩小。

有没有办法为某些区域设置单独的根字体大小？或者一种在不重写所有间距的情况下对齐两个项目的方法？

我尝试过使用它们，但遇到了很多麻烦

Answer 1

一般来说，当我们的界面遇到此类问题时（例如 XAML，但原则在任何地方都是相同的）来对齐图形界面，我们会使用 margin 或 等属性填充等等...

不要尝试将它们一一对齐。尝试将您的 UI 完全与 root 对齐