Gibt es eine Möglichkeit, für bestimmte Gebietsschemas separate Stammschriftgrößen festzulegen?

Question

Ich habe ein Designsystem, das in React- und CSS-Modulen geschrieben ist. Die Einheiten für Abstände, Schriftarten, Elementgrößen usw. sind alle in rem geschrieben (setzen Sie den Basiswert auf 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;
  ...
}

Das Problem ist, dass in dem Projekt, das ich in das Designsystem importieren möchte, überall rem verwendet wird und der Stammwert bereits auf 10px gesetzt ist.

Dadurch werden alle aus dem Design-Systempaket importierten Komponenten verkleinert.

Gibt es eine Möglichkeit, für bestimmte Bereiche separate Stammschriftgrößen festzulegen? Oder eine Möglichkeit, zwei Elemente auszurichten, ohne den gesamten Abstand neu zu schreiben?

Ich habe versucht, sie zu verwenden, hatte aber große Probleme

Answer 1

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

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