Adakah terdapat cara untuk menetapkan saiz fon akar yang berasingan untuk tempat tertentu?

Question

Saya mempunyai sistem reka bentuk yang ditulis dalam modul tindak balas dan css, unit untuk jarak, fon, saiz elemen, dll. semuanya ditulis dalam rem (tetapkan nilai asas kepada 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;
  ...
}

Masalahnya ialah dalam projek yang saya ingin import ke dalam sistem reka bentuk, rem digunakan di mana-mana dan nilai akar sudah ditetapkan kepada 10px.

Oleh itu, semua komponen yang diimport daripada pakej sistem reka bentuk akan dikecilkan.

Adakah terdapat cara untuk menetapkan saiz fon akar yang berasingan untuk kawasan tertentu? Atau cara untuk menyelaraskan dua item tanpa menulis semula semua jarak?

Saya cuba menggunakannya tetapi menghadapi banyak masalah

Answer 1

Secara umumnya, apabila antara muka kami menghadapi masalah seperti itu (seperti XAML, tetapi prinsipnya adalah sama di mana-mana) untuk menyelaraskan antara muka grafik, kami menggunakan margin 或 等属性填充dan lain-lain...

Jangan cuba selaraskan satu demi satu. Cuba selaraskan UI anda sepenuhnya dengan akar