Existe-t-il un moyen de définir des tailles de police racine distinctes pour certaines régions ?

Question

J'ai un système de conception écrit en modules React et CSS, les unités d'espacement, les polices, la taille des éléments, etc. sont toutes écrites en rem (définissez la valeur de base sur 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;
  ...
}

Le problème est que dans le projet que je souhaite importer dans le système de conception, rem est utilisé partout et la valeur racine est déjà définie sur 10px.

Ainsi, tous les composants importés du package du système de conception seront réduits.

Existe-t-il un moyen de définir des tailles de police racine distinctes pour certaines zones ? Ou un moyen d'aligner deux éléments sans réécrire tout l'espacement ?

J'ai essayé de les utiliser mais j'ai eu beaucoup de problèmes

Answer 1

D'une manière générale, lorsque notre interface rencontre de tels problèmes (comme XAML, mais le principe est le même partout) pour aligner l'interface graphique, nous utilisons margin 或 等属性填充etc...

N’essayez pas de les aligner un par un. Essayez d'aligner complètement votre interface utilisateur avec root