有沒有辦法為某些區域設定單獨的根字體大小？

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 對齊